利用条件注释制作下拉菜单

2008-02-23 06:08:11来源：互联网阅读 ()

　　

　　上篇文章里提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。

　　这个dropmenu（下拉菜单）模型来自cssplay，使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。

　　先看一个最简单的模型

　　下面是xhtm

　　

<divclass="menu">

　　<ul>

　　<li><aclass="drop"href="../menu/index.html">DEMOS

　　

　　</a>

　　

　　

　　<table><tr><td>

　　<ul>

　　<li><ahref="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollarsadvertisingpage</a></li>

　　<li><ahref="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtextaroundimages</a></li>

　　<li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li>

　　<li><ahref="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a></li>

　　<li><aclass="drop"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/clickwithnoborders</li>

　　<liclass="upone"><ahref="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a></li>

　　<li><ahref="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemapfordetailedinformation</a></li>

　　<li><ahref="../menu/bodies.html"title="funwithbackgroundimages">funwithbackgroundimages</a></li>

　　<li><ahref="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a></li>

　　<li><ahref="../menu/em_images.html"title="emsizeimagescompared">emimagesizescompared</a></li>

　　</ul>

　　</td></tr></table>

　　

　　</li>

　　

　　</ul>

　　</div>

　　CSS

　　

<linkrel="stylesheet"media="all"type="text/css"href="final_drop.css"/>

　　采用双样式，给ie和非ie分别定义样式，假如IE时候，在final_drop.css基础上补充一个final_drop_ie.css

　　先看看非ie下的css是怎样定义的

　　

.menuulliul{

　　display:none;

　　}

　　/*specifictononIEbrowsers*/

　　.menuulli:hovera{

　　color:#fff;

　　background:#bd8d5e;

　　}

　　/*定义鼠标滑过样式*/

　　.menuulli:hoverul{

　　display:block;

　　position:absolute;

　　top:3em;

　　margin-top:1px;

　　left:0;

　　width:150px;

　　}

　　在非IE下，看到鼠标滑过时候li包含的ul显示了，因为这些浏览器支持li:hover用法

　　IE下的css

　　

.menuullia:hover{

　　color:#fff;

　　background:#bd8d5e;

　　}

　　/*当鼠标滑过时li包含的ul显示*/

　　.menuullia:hoverul{

　　display:block;

　　position:absolute;

　　top:3em;

　　left:0;

　　background:#fff;

　　margin-top:0;

　　margin-top:1px;

　　}

　　继承上面的final_drop.css样式，无鼠标时间时候li包含的ul不显示

　　因为

　　

　　所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容

　　而IE7下通过li:hover显示的效果相同

　　下面是作者的原模型（三级菜单纵向和相结合的）

　　就是在简单模型的基础上复杂化

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有