3 items | 32 visits
Some samples---All about Web Develop
Updated on Jan 03, 08
Created on Jan 03, 08
Category: Computers & Internet
URL:
NsYta 's List: Model
-
-
CSS Dock Menu
May 8th, 2007 Filed in: Design, Mac Jump to comments
If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.
Download CSS Dock Menu
(View Demo)
Zip package included JS, CSS, and icons1. Download source files
Download the CSS dock menu zip package.
2. Insert code
In between the HTML <head> tag, add the following code
<script type="text/javascript" src="http://www.ndesign-studio.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.ndesign-studio.com/js/interface.js"></script><link href="http://www.ndesign-studio.com/style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack to display probably in IE 6.
3. Configuration
Don’t forget to add the following code to anywhere within the <body> tag:
<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>4. Add or remove item
To add menu item to the top dock (note: span tag is after the img tag):
<a class="dock-item" href="http://www.ndesign-studio.com/#"><img src="http://www.ndesign-studio.com/images/home.png" alt="home" /><span>Home</span></a>To add menu item to the bottom dock (note: span tag is before the img tag):
<a class="dock-item2" href="http://www.ndesign-studio.com/#"><span>Home</span><img src="http://www.ndesign-studio.com/images/home.png" alt="home" /></a>Browser Compatibility
I have tested on IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 (although there are some minor rendering issues with Safari).
-
-
-
-
工作需要搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习
在线演示：http://www.livepo.com/UserCode/DivCssMenu.html-----------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div+CSS+JS树型菜单，可刷新</title>
<meta name="description" content="http://www.livepo.com">
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
width:180px;
line-height: 24px;
list-style-type: none;
text-align:left;
/*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
background:#CCC; /*一级目录的背景色*/
border-bottom:#FFF 1px solid; /*下面的一条白边*/
float:left;
/*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li{
background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{
padding-left:20px;
width:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
#PARENT{
width:300px;
padding-left:20px;
}
</style>
</head>
<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
<ul id="ChildMenu2" class="collapsed">
<a href="http://www.netany.net" target="_blank">支付</a></li>
<li><a href="#">网上支付</a></li>
<li><a href="#">登记汇款</a></li>
<li><a href="#">在线招领</a></li>
<li><a href="#">历史帐务</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">登录</a></li>
<a href="http://www.netany.net" target="_blank">管理</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">管理</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
<ul id="ChildMenu4" class="collapsed">
<li><a href="#">登录</a></li>
<a href="http://www.netany.net" target="_blank">管理</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">管理</a></li>
</ul>
</li>
</ul>
</div>
<div style="width:300;padding-left:30px;">
</br></br>
工作需要搞了一个菜单，分享给大家，大家一齐学习
</br></br>
<p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p>
</div>
</body>
</html>
<script type=text/javascript><!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
{
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
else
{
_paramStr = "";
}
if (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{
MenuID = _paramKeyVal[1];
}
}
/*
if (_paramArr.length>0)
{
var _arr = new Array(_paramArr.length);
}
//取所有#后面的，菜单只需用到Menu
//for (var i = 0; i < _paramArr.length; i++)
{
var _paramKeyVal = _paramArr[i].split('=');
if (_paramKeyVal.length>0)
{
_arr[_paramKeyVal[0]] = _paramKeyVal[1];
}
}
*/
}
if(MenuID!="")
{
DoMenu(MenuID)
}
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>
提示：您可以先修改部分代码再运行
稍微修改了一下显示，这样方便大家测试
转自： http://bbs.blueidea.com/thread-2391651-1-1.html - NsYta on 2008-01-03
-
工作需要搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习
1 - 3 of 3
20 items/page
List Comments
(0)
List Info
第一次翻译，请版主和大家多指正！
效果预览地址：http://devthought.com/cssjavascript-true-power-fancy-menu/
顶部的Menu
让我介绍给你别致的菜单
当它来创造你网站的好行部分的时候，你可能最先考虑的是一个给标签义样式的无序列表，然后，这些导航区域到处都是，就像很多人相信者能够使他们的网站更加兼容。个人来看，我觉得他们更有意义 、容易被理解。
在这篇文章里，我将通过用一些小巧的js效果创建一个定做的导航吧。幸亏Mootools 库，这个精致的库只有1.5kb，不仅如此，而且它也通过IE6/7、FF 和Safari ，并且它是容易理解的。
介绍
每次我知道我打算用js改变行为或者查找一些东西。我试着用一个简单的标签来实现，并且确信他能完美地表现并用js关闭，为了阐述这点，想象下你想做一个元素翻动。用js的属性改变宽度，因此我确信当我随意修改宽度的时候我首先得写一个样式。
对这个菜单，就像我们有一个可移动的像背景一样活动的素，我们务必首先通过使用css，我们能自由移动它并且它不影响菜单的显示。如果你不能做到这点，你编译js会碰到一个bug，你会发现你自己纳闷它是否能被css、js、浏览器解析。
行动吧
就像一些儿其他的导航，我们使用一个带有A的无序列表
<ul>
<li class="current" id="menu_home"><a href="#">Home</a></li>
<li id="menu_plantatree"><a href="#">Plant a tree</a></li>
<li id="menu_travel"><a href="#">Travel</a></li>
<li id="menu_rideanelephant"><a href="#">Ride an elephant</a></li>
</ul>
</div>
这是一个语意正确的创建，容易分解的导航结构
CSS样式
就像我在前面说的，我们编写出完美的，通过浏览器的css是至关重要的，我们一起来吧，我们面对的第一个问题是根据当前共享的被大多数浏览器正确解析的CSS说明为一个跟随鼠标的圆角矩形创建一个背景属性是不可能的。这就强迫我们添加一个新的能作为背景移动的li项目。
我们给他定义位置：
无序列表 position:relative
移动项目 position:absolute
以便他通过js在菜单边界之间轻松地移动。如果你不是很理解这个怎么做，我建议你快速读完关于css positioning的文章。你将理解它，我们纯粹地给它定义position:absolute，我们不得不更努力的做，毫无价值的计算js使得正确定位他
那么，这儿是我的代码：
position: relative;
height: 29px;
width: 421px;
background: url('images/bg.gif') no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
#fancymenu ul {
padding: 0;
margin: 0;
}
/* Don't apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#fancymenu ul li {
float: left;
list-style: none;
}
#fancymenu ul li a {
text-indent: -500em;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
}
到现在定义它的位置是非常容易的，并且我为难理解的部分做了一些注释。（这个文本缩进属性是用为了添加额外的标记）。并且让他容易理解。
现在，我们必须添加背景图片为每个链接：
width: 59px;
background: url('images/menu_home.png') no-repeat center !important;
background: url('images/menu_home.gif') no-repeat center; // ie!
}
#menu_plantatree a {
width: 119px;
background: url('images/menu_plantatree.png') no-repeat center !important;
background: url('images/menu_plantatree.gif') no-repeat center;
}
#menu_travel a {
width: 70px;
background: url('images/menu_travel.png') no-repeat center !important;
background: url('images/menu_travel.gif') no-repeat center;
}
#menu_rideanelephant a {
width: 142px;
background: url('images/menu_rideanelephant.png') no-repeat center !important;
background: url('images/menu_rideanelephant.gif') no-repeat center;
}
在接下来的部分你就知道我们为什么用它，gif图片是为了在IE下面使用!important Hack
可移动背景
根据我们讨论，有个在底层移动的LI元素占据每一个元素的阴影部分，由于他的结构，我们得采取一些类似滑动门的技术
他的标签如下：
他在无序列表中没有任何语法作用，我们将通过js包含它，当然，作为测试，你能手工地调用它然后去掉它。他的样式是：
background: url('images/bg_menu_right.png') no-repeat top right !important;
background: url('images/bg_menu_right.gif') no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}
#fancymenu .background .left {
background: url('images/bg_menu.png') no-repeat top left !important;
background: url('images/bg_menu.gif') no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
这个技术的用途是我们为什么不使用滤镜显示png图片在IE下的主要原因之一，你不能决定背景的位置，那一个在正确的角落显示的左边的部分之上，阅读关于PNG hack 伪类的文章了解更多，另一个理由是微软自动升级他的用户的浏览器到很好地支持png的IE7
记住，当你输入gif格式图片时，你得设置亚光和背景想匹配,否则一切看起来都真糟糕，你的图片应该像下面的：
[attach]33223[/attach]
编写
幸亏我们精明的css代码，我的js是非常短小精悍，他的工作是显示添加额外的背景标签，当然他要实现收缩和移动的效果
我们需要Mootools' Fx.Style.js ,Dom.js ,例如这篇文章的例子，我也用了一个在Fx.Transitions包里（记住过度是使背景多样化移动）发现的常用的过度。他写在class的表单里，一般保证几个菜单在同一个页面是可行的
initialize: function(menu, options) {
this.setOptions(this.getOptions(), options);
this.menu = $(menu), this.current = this.menu.getElement('li.current');
this.menu.getElements('li').each(function(item){
item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
}.bind(this));
this.back = new Element('li').addClass('background').adopt(new Element('div').addClass('left')).injectInside(this.menu);
this.back.fx = this.back.effects(this.options);
if(this.current) this.setCurrent(this.current);
},
setCurrent: function(el, effect){
this.back.setStyles({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
(effect) ? this.back.effect('opacity').set(0).start(1) : this.back.setOpacity(1);
this.current = el;
},
getOptions: function(){
return {
transition: Fx.Transitions.sineInOut,
duration: 500, wait: false,
onClick: Class.empty
};
},
clickItem: function(event, item) {
if(!this.current) this.setCurrent(item, true);
this.current = item;
this.options.onClick(new Event(event), item);
},
moveBg: function(to) {
if(!this.current) return;
this.back.fx.custom({
left: [this.back.offsetLeft, to.offsetLeft],
width: [this.back.offsetWidth, to.offsetWidth]
});
}
});
SlideList.implement(new Options);
最后，该我们开始了，创建个对象，通过id和需要的选项
下面这个例子展示了当页面DOM树在加载的时候怎么用他
new SlideList($E('ul', 'fancymenu'), {transition:
Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) {
ev.stop(); }});
});
这个脚本首先寻找当前类元素，如果找到了，他在他后面定位背景，如果没找到，直到用户点击一些项目来设置当前类，这个用户选择菜单是非常容易操作的，如下面的例子，代替有链接的菜单。
有个当选择时通过一个事件对象响应一个功能的选项，并且点击元素对象作为一个变量被提交。你也可改变持续，过度效果等等
扩展下
如果你能搞定它了，你必须注意他并不曾这么容易,事实上，这个教程的目的不仅是教你怎么做一个菜单，他还帮你理解通过css和js做一些意想不到东西。同时提供一些技巧使你开始如果你想做你自己的 - NsYta on 2007-12-18