8.水平导航菜单

1.自适应的水平菜单   

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

 （1）html框架

<div id="menu">

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

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

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

<a href="#">map</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)制作斜角

<a href=“#”>

<span class="corner"></span>

home

</a>

(2)基本设置

设置容器 文字样式同上

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

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

（3）设置斜角效果

div{

position：absolute；

height：0；

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;

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代码

<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><a href="#"><b>map</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 class="item">

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

<div class="row2"></div>

<div class="row3"></div>

<div class="row4"></div>

<p>home</p>

</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>

<li class="item">

<a href="#">

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

<div class="row2"></div>

<div class="row3"></div>

<div class="row4"></div>

<p>home</p>

</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.理解“钩子”和“垫子”的用途