您現在的位置: 网站首頁 / 網站建設 / 正文

下拉及多級彈出菜單-Web標准(div+css)教程

作者: admin 发布: 2015-1-26 22:36:55 分类: 網站建設 閱讀: 次 查看評論

  今天我們開始學習《十天學會web標准(div+css)》的下拉及多級彈出菜單,包含以下內容和知識點:

  一、帶下拉子菜單的導航菜單

  二、絕對定位和浮動的區別和運用

  三、css自適應寬度滑動門菜單

  一、帶下拉子菜單的導航菜單

  下拉菜單在一些企業網站應用尤爲廣泛,它存在使用方便,占用空間小等特點。之前縱向導航教程中已使用過二級導航,今天制作下橫向導航菜單的二級菜單,方法和縱向一樣,只不過由縱向改變爲橫向而已,下面我們以上一章第二節用圖片美化的橫向導航中的實例進行修改。

  

  先在html代碼增加二級菜單的代碼:

  <div id="menu">

  <ul>

  <li><a id="current" href="#">首頁</a></li>

  <li><a href="#">网页版式</a>

  <ul>

  <li><a href="#">自适应宽度</a></li>

  <li><a href="#">固定宽度</a></li>

  </ul>

  </li>

  <li><a href="#">web教程</a>

  <ul>

  <li><a href="#">新手入门</a></li>

  <li><a href="#">视频教程</a></li>

  <li><a href="#">常见问题</a></li>

  </ul>

  </li>

  <li><a href="#">web实例</a></li>

  <li><a href="#">常用代码</a></li>

  </ul>

  </div>

  增加完代碼後,在浏覽器裏預覽一下:

  

  是不是一看頭都大了,怎麽變成這樣了。別懵,我們分析一下錯亂的原因。首先我們看下“自適應寬度”和“固定寬度”兩個二級菜單也繼承了一級菜單的背景和橫向排列,所以我們先把二級菜單的背景和浮動清除掉,增加以下css代碼:

  #menu ul li ul li { float:none;}

  #menu ul li ul li a { background:none;}

  現在預覽看下,二級菜單是不是已經歸位了,但鼠標劃過時還繼承了一級菜單的樣式,所以也改爲最終效果上的黑色背景白色文字,還有下拉菜單的灰色邊框和灰色背景也一並加上,修改並增加如下代碼:

  

  #menu ul li ul { border:1px solid #ccc;}

  #menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}

  #menu ul li ul li a { background:none;}

  #menu ul li ul li a:hover { background:#333; color:#fff;}

  第一行設置二級菜單的灰色邊框;爲了美觀,我們把下拉菜單的寬度設置成和一級菜單寬度相同,第二行的width:85px再加上第一行上設置的邊框左右各1px後正好是87px,和一級菜單寬度相同。margin:0是爲了清除掉繼承一級菜單中margin-left:2px;最後一行設置鼠標劃過時的樣式。

  再預覽一下,是不是基本的樣式已實現了。

  

  下一步就該把二級菜單隱藏,當鼠標劃過時顯示出來了。增加如下代碼:

  #menu ul li ul { display:none; border:1px solid #ccc;}

  #menu ul li:hover ul { display:block;}

  注意第二行的写法,#menu ul li:hover ul这个样比较难理解,它的意思是定义当鼠标划过#menu下ul下li时,li下的ul的样式(有点饶舌),这里设置为display:block,意思是鼠标划过时显示这块内容。开始隐藏,鼠标划过时显示, 这就实现了我们想要的效果。目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现。我们定义一个类.sfhover(自己命名,需和JS中相同)的属性为display:block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:指定的高于继承的原则,就实现了IE6下的正确显示。所以增加如下代码:

  #menu ul li.sfhover ul { display:block;}

  认真跟着教程制作的朋友可能已经发现,现在应用的JS和纵向导航时应用的不样,但最终实现的效果是一样的。同理css在布局网站时,也是可以多种方法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。JS部分本例不做讲解,如果你想弄清楚JS是如何实现的,请学习js相关内容。到这里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menu ul li ul增加position:absolute;属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了。完整的预览代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <script type=text/javascript><!--//--><![CDATA[//><!--

  function menuFix() {

  var sfEls = document.getElementById("menu").getElementsByTagName("li");

  for (var i=0; i<sfEls.length; i++) {

  sfEls[i].onmouseover=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover";

  }

  sfEls[i].onMouseDown=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover";

  }

  sfEls[i].onMouseUp=function() {

  this.className+=(this.className.length>0? " ": "") + "sfhover";

  }

  sfEls[i].onmouseout=function() {

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

  "");

  }

  }

  }

  window.onload=menuFix;

  //--><!]]></script>

  <style type="text/css">

  body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

  a { color: #000; text-decoration: none; }

  a:hover { color: #F00; }

  #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

  #menu ul { list-style: none; margin: 0px; padding: 0px; }

  #menu ul li { float:left; margin-left:2px;}

  #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}

  #menu ul li a:hover { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}

  #menu ul li a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

  #menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}

  #menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}

  #menu ul li ul li a { background:none;}

  #menu ul li ul li a:hover { background:#333; color:#fff;}

  #menu ul li:hover ul { display:block;}

  #menu ul li.sfhover ul { display:block;}

  </style>

  </head>

  <body>

  <div id="menu">

  <ul>

  <li><a id="current" href="#">首頁</a></li>

  <li><a href="#">网页版式</a>

  <ul>

  <li><a href="#">自适应宽度</a></li>

  <li><a href="#">固定宽度</a></li>

  </ul>

  </li>

  <li><a href="#">web教程</a>

  <ul>

  <li><a href="#">新手入门</a></li>

  <li><a href="#">视频教程</a></li>

  <li><a href="#">常见问题</a></li>

  </ul>

  </li>

  <li><a href="#">web实例</a></li>

  <li><a href="#">常用代码</a></li>

  </ul>

  </div>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  二、絕對定位和浮動的區別和運用

  學習到現在,定位和浮動也都涉及到了,但有些朋友可能還在迷惑,兩者都可以分欄布局,到底什麽時候用浮動,什麽時候用定位呢?

  当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

  而浮動元素的定位還是基于正常的文檔流,然後從文檔流中抽出並盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後,仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。它只是改變了文檔流的顯示,而沒有脫離文檔流,理解了這一點,就很容易弄明白什麽時候用定位,什麽時候用浮動了。

  一個元素浮動或絕對定位後,它將自動轉換爲塊級元素,而不論該元素本身是什麽類型。

  三、 css自适应宽度滑动门菜单

  CSS自適應寬度菜單指菜單的寬度可以隨著內容的增加而變寬,就拿上邊的實例來說,是按4個字的寬度來設計的,如果其中一項爲5個字或更多,就放不下了。那麽我們就需要讓它的寬度可以隨著內容的增減而變化,這就是css自適應寬度菜單。下面我們講一下自適應寬度按鈕,和菜單原理是一樣,因爲自適應寬度菜單在《新手常見問題》中已經講過了,如果學會自適應按鈕,你還不會制作自適應菜單的話,請閱讀http://www.aa25.cn/div_css/898.shtml。

  你是否還記得在第五章時學習的css按鈕實例(如下圖),當時只做了一個按鈕,它這裏是三個按鈕,而且寬度不一樣,今天我們還以這個按鈕爲基礎,制作寬度自應適應的按鈕。

  

  那麽它的實現原來是什麽?我們看下邊一張圖。要想實現自適應寬度,需要在文字上增加一個輔助標簽,如span,分別在a上和span上設置背景,一個左側對齊,一個右側對齊,如下的原理圖,

  

  四条辅助线内为一个按钮元素,绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会把span撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的css Sprites技术,把背景图片和鼠标经过图片放到一张图片上。

  

  拿第五章css按鈕的例子代碼進行修改,先改爲背景圖片使用上圖,再增加兩個字數不等按鈕,並在文字上增加span標簽

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }

  a:hover { background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat 0px -37px;}

  </style>

  </head>

  <body>

  <p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  預覽顯示效果如下所示,因背景圖片比較長,所以右側顯示不太友好,下一步就需要把a的寬度給去掉,設置span的背景,使右側顯示正常,另外把三個按鈕橫向排列

  

  在a上增加如下代碼:

  float:left; margin:5px;

  橫向排列,並增加5px的外邊距,現在看下效果吧。爲了美觀,下一步需要a的左側增加填充,使文字不死貼左側,同理span右側需要增加一個同樣的填充。

  a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(?/post/btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

  a span { display:block; background: url(?/post/btn_bg.gif) no-repeat right 0px; padding-right:20px;}

  a:hover { background: url(?/post/btn_bg.gif) no-repeat 0px -37px;}

  a:hover span{ background: url(?/post/btn_bg.gif) no-repeat right -37px;}

  對比以上代碼,可能你已經發現,原來a頂部的3px給去掉了,把高度改爲37px了,行高也改爲37px了,爲什麽這麽做,大家動手試下就明白了。然後設置a下span的背景圖片,span默認是內聯元素,所以需先轉換爲塊級元素;另外需增加鼠標經過時span的樣式。顯示效果如下,對比一下實例圖,是不是實現了這樣的效果。

  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }

  a span { display:block; background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat right 0px; padding-right:20px;}

  a:hover { background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat 0px -37px;}

  a:hover span{ background: url(?upload/2010-08/17/091722_?/post/btn_bg.gif) no-repeat right -37px;}

  </style>

  </head>

  <body>

  <p><a href="#"><span>免费注册</span></a><a href="#"><span>登录</span></a><a href="#"><span>在淘宝网上开店</span></a></p>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  文章出处:标准之路 编辑:杨雨晨思

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表