8.水平导航菜单

1.自适应的水平菜单

菜单随着浏览器的窗口的宽度的变化而改变排列方式如果宽度不够菜单会自动折行

（1）html框架

<a href="#">contact</a>

</div>

（2）容器

#menu{

font-family:arial;

font-size:14px;

}

菜单项设置

#menu a,#menu a:visited{

display:block;

float:left;

color:#000;

text-decoration:none;

padding:4px;

margin:4px;

border-top:8px solid #9ab;

border-bottom:8px solid #9ab;

}

(3)设置鼠标经过效果，将文字的颜色从黑色变为红色，同时将上下两条粗边框变为褐色，以示和其他菜单项的区别

#menu a:hover{

color:#f00;

border-top:8px solid #000;

border-bottom:8px solid #000;

}

注意在盒子设为浮动后垂直方向的margin相邻不会塌陷即不会取两者之间的较大者，而是间距是两者相加。

为防止菜单项内部的折行：在#menu a,#menu a:visited中增加

white-space：nowrap；

确保在单词之间的空白处不换行

2.自适应的斜角水平菜单

(1)制作斜角

home

</a>

(2)基本设置

设置容器文字样式同上

设置每个菜单的基本属性 a为块级左浮动相对定位背景颜色

字体颜色文字下划线取消内边距 margin：1px 0 0 1px；

（3）设置斜角效果

div{

position：absolute；

height：0；

overflow:hidden;

border-style:solid;

border-60px;

border-color: #999 #666 #333 #ccc;

}

将最后两行做改变

border- 0 60px 60px 0;

border-color:#fff #666 #666 #fff;

#menu a .conrner{

position:absolute;

height:0;

overflow:hidden;

border-bottom:solid 6px #c00;

border-left:solid 6px #fff;

top:0;

left:0;

}

top和left设置后图片会以a元素的边界为基准

而如果top和left默认值不设置，会使图片以a元素内容的左上角为基准。

（4）设置鼠标经过效果背景和折角的颜色都变色文字也变色

#menu a:hover{

color:#333;

}

#menu a:hover span.corner{

border-bottom:solid 6px #f90;

}

3.应用滑动门技术的玻璃效果菜单

上图中左面的是menu的背景右面的是菜单项的背景 hover.gif

相应的html代码

<ul>

<li><a href="#"><b>contact us</b></a></li>

</ul>

</div>

当中的a和b标记分别承担了左右门的钩子的任务

设置菜单整体效果

(1)#menu{

font-family:arial;

font-size:14px;

500px;

}

(2)设置ul的样式

#menu ul{

padding：0 0 0 8px;

margin:0;

list-style:none;

height:35px;

background:url(under.gif);

}

(3)设置#menu容器的li的属性

#menu ul li{

float:left;

}

(4)设置a元素为块级元素

#menu ul li a {

display:block;

line-height:35px;//a设置行高将使文字垂直集中排列

color:#ddd;

text-decoration:none;

padding:0 0 0 14px;

}

（5）使用滑动门技术设置玻璃材质背景

首先设置a元素的鼠标经过见效果

#menu ul li a:hover{

color:#fff;

background:url(hover.gif);

}

途中显示背景已经出现但是右边被齐刷刷切断了

需要对b标记的属性值进行设置仅需将其设置为块级元素即可

#menu ul li a b{

display:block;

}

#menu ul li a:hover b{

color:#fff;

background:url(hover.gif) no-repeat right top;

}

使背景图像对称，右侧增加一些空白

#menu ul li a b{

dispaly:block;

padding:0 14px 0 0 ;

}

(6)进一步解决问题

修饰菜单项的文字：

菜单的背景随浏览器窗口扩展：

将#menu中的margin:0 auto 0 0;修改为margin：0 auto 0 0；

即可使背景随着浏览器的窗口扩展而扩展。

设置滚动条：

当窗口变窄导一定程度时自动出现滚动条。而不是自动折行

实现方法：将背景图像从ul转移到#menu容器中，并设置ul的width属性

代码如下：#menu{

...

background:url(under.gif);

}

#menu{

...

500px;

}

4.三状态玻璃效果菜单（双层滑动门应用）

普通状态菜单项为灰色鼠标经过时的菜单项显示为浅紫色当前页时的菜单项为深紫色

（1）设置菜单整体效果

仅用一个图片文件来完成即可分别使用不同的颜色，文件高度为105小像素上中下各35像素

html代码：

<div id="menu">

<ul>

<li><a href="#"><b>home</b></a></li>

<li><a href="#"><b>contact us</b></a></li>

<li><a href="#"><b>web dev</b></a></li>

<li class="current"><a href="#"><b>web design</b></a></li>

</ul>

</div>

(2)对列表元素ul和li进行设置

#menu ul{

font-family

font-size

padding:0 0 0 8px;

margin:0 auto;

list-style:none;

height:35px;

}

#menu ul li {

float:left;

margin:0 2px;

}

(3)设置第一层滑动门

设置每一个列表项的链接的属性，即第一层滑动门

将每一个列表项中的链接设置为块级元素，然后设置向左浮动，
再设置背景图片，浅灰色的图像在文件中的最上面，因此不需要设置图片的基准位置。

代码：#menu ul li a {

display:block;

float:left;

line-height:35px;

color:#666;

text-decoration:none;

padding:0 0 0 14px;

background:url('background.gif');

}

<b>标签挂载右侧边缘所需的图像

#menu ul li a b{

display:block;

padding:0 14px 0 0;

background:url('background.gif') no-repeat right top;

}

(4)设置第二层滑动门

即鼠标经过时的效果，设置文字颜色为白色，其次设置鼠标经过时的背景图像，浅紫色的按钮图像在文件的中间，注意背景图像定位的基准

#menu ul li a:hover{

color:#fff;

background:url('background.gif') left center;

}

#menu ul li a:hover b{

background:url('background.gif') right center;

}

(5)设置表示当前页面的菜单项

对class=“current”的列表项目进行设置把背景图像的定位基准

#menu ul li .current a {

color:#fff;

background:url('background.gif') no-repeat left bottom;

}

#menu ul li .current a b{

background:url('background.gif') no-repeat right bottom;

}

当鼠标经过菜单项时，依然使用紫色作为背景，同时强制使用箭头光标

#menu ul li .current a:hover{

background:url('background.gif') no-repeat left bottom;

cursor:default;

}

#menu ul li .current a:hover b{

background:url('background.gif') no-repeat right bottom;

}

进一步解决的问题

菜单项内部能能折行

解决问题的方法：white-space：nowrap;不允许菜单项在空白处折行

5.不使用图像的圆角菜单

1.实现圆角效果不适用图像的方法

（1）html结构

<body>

</div>

</body>

(2)对item容器进行css的设置

.item{

100px;

margin:0 auto;

padding:0;

font:14px arial;

font-weight:bold;

}

(3)对p段落的样式进行设置

.item{

padding:0 0 2px 0;

margin:0px;

text-align:center;

background:#cc6;

border:solid 1px #000;

border-top-0;

}

(4)设置圆角的4个div

。item div{

height:1px;

overflow:hidden;

background:#cc6;

border-left:solid 1px #000;

border-right:solid 1px #000;

}

共同属性是1个像素高，背景颜色和他们下面的矩形背景色相同，并且两端各有1像素来构成边框。

（5）再设置最上面的row1的样式，它需要覆盖共性的背景色，因为它是作为水平上边框出现的，所以把它的背景色设置为边框颜色即可。同时通过设置左右margin使它左右各短5个像素，

.item .row1{

margin:0 5px;

background:#000;

}

再设置row2

.item .row2{

margin:0 3px;

border:0 2px;

}

设置row3

.item row3{

margin:0 2px;

}

设置row4

.item row4{

margin:0 1px;

height:2px;

}

2.用列表进行改造

(1)html代码

<ul>

</a>

</li>

</ul>

(2)ulcss

ul{

height:26px;

margin:0;

padding:10px;

list-style-type:none;

background:#ddd;

}

(3)对item设置

.item{

float:left;

100px;

margin:0 -1px 0 0;

padding:0;

font:14px arial;

font-weight:bold;

}

(4)设置鼠标响应效果

增加颜色设置取消下划线

.item a ,.item a：visited{

color:#000;

text-decoration:none;

}

.item a:hover p{

background:#884;

color:#fff;

}

对于各种元素，默认的背景色是透明的，但是当某一个元素的上级元素设置了某种背景色之后，它的后代的背景色就继承了这种颜色，因此这里就需要把它恢复为透明色，才可以正确的显示鼠标经过的效果。

.item a:hover{

background:transparent;

}

对矩形上面的4个构成圆角的div在鼠标指针经过时的效果进行设置

.item a:hover .row2,

.item a:hover .row3,

.item a:hover .row4,

{

background:#884;

}

6.会跳起的多彩菜单

每个菜单都是向左浮动排列的，这些盒子都是根据上边缘对齐的，如果段落变高，就会向下延伸，而不是向上延伸

给每个菜单项的上面增加一个预留的高度空间，然后在鼠标指针经过某一个菜单项时，使预留的空间高度变为0，同事增加段落的高度表现为padding-bottom值加大即可实现菜单项跳起的效果。

在上例的基础上

改造html结构

在每个li中增加一个div 类别名为pad即垫子

<a href="#">

<div class="pad"></div>

<div class="row1"></div>....

<p>home</p>

</a>

对这个垫子pad的div设置css样式

.item .pad{

height:10px;

border:0;

background:transparent;

}

看起来这个垫子不存在

设置p段落在鼠标指针经过时的样式，

.item a:hover p{

background:#884;

color:#fff;

padding-bottom:12px;

}

.item a:hover .pad{

height:0px;

}

如果想实现菜单向下延展的效果

在html代码里把row1-4的div移动到p段落下面就可以了，p的下边框设置为0，上边框设置为1像素

将p的padding-top值增加即可，并不需要pad垫子。

小结

1.设置浮动方式，以及是否适应宽度的设置方法；

2.不使用图像，实现斜角和圆角的方法；

3.使用背景图片的滑动门技术

4.理解“钩子”和“垫子”的用途