DIV教程之CSS+XHTML制造的复杂网页下拉菜单

显示全部楼层 · 发表于 2015-1-16 00:06:49

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
CSS和JS一样深不成测,大概花十地利间就可以学会,但假如想完整通透,也许要支付几百个十天.永久不要以为本人比他人伶俐,自觉得比他人懂的人实在甚么都不懂.学无止尽,亘古稳定.高低求索,废寝忘食.自勉.
闲来无事,揣摩着写了个下拉菜单,纯CSS的.最后灵感来自于Discuz头部导航中的"我的"下拉效果.大抵剖析了一下,完成道理很复杂,鼠标未触发事务时界说一个款式只显现父级菜单,而埋没失落其子级菜单.再界说一个款式,赋于鼠标触发事务时.只需弄了这个道理,用纯CSS写出这个效果就不难了.
花了半小时,对照顺畅的写上去的,十分繁复的效果.利用时加以丑化就能够了.兼容FF,IE6以上,其他扫瞄器未测试.
先看效果:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Author"content="网页教授教养网"/><meatname="AuthorBlogURL"content="http://www.poluoluo.com/"/><metaname="description"content="Templat"/><title>繁复下拉菜单-纯CSS+XHTML制造</title><styletype="text/css"></style></head><body><ulclass="menu"><liclass="tuckUp"onmousemove="this.className=pullDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuOne<divclass="item"><ahref="/">ITEM01</a></a><br/><ahref="/">ITEM02</a></a><br/><ahref="/">ITEM03</a><br/><ahref="/">ITEM04</a><br/><ahref="/">ITEM05</a><br/><ahref="/">ITEM06</a><br/></div></li><liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuTwo<divclass="item"><ahref="/">ITEM01</a><br/><ahref="/">ITEM02</a><br/><ahref="/">ITEM03</a><br/><ahref="/">ITEM04</a><br/></div></li><liclass="tuckUp"onmou搜索引擎优化ver="this.className=pullDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuThree<divclass="item"><ahref="/">ITEM01</a><br/><ahref="/">ITEM02</a><br/><ahref="/">ITEM03</a><br/><ahref="/">ITEM04</a><br/><ahref="/">ITEM05</a><br/></div></li><liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuFour<divclass="item"><ahref="/">ITEM01</a><br/><ahref="/">ITEM04</a><br/><ahref="/">ITEM05</a><br/></div></li><liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuFive<divclass="item"><ahref="/">ITEM01</a><br/><ahref="/">ITEM02</a><br/><ahref="/">ITEM03</a><br/><ahref="/">ITEM04</a><br/><ahref="/">ITEM05</a><br/></div></li></ul></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
款式部分:

*{
margin:0;
padding:0;
}
body{
font:12pxVerdana,Geneva,sans-serif#444;
line-height:1.5;
}
ulli{
list-style:none;
}
.menu{
width:660px;
margin:20pxauto;
}
.menuli{
display:inline;
float:left;
margin:05px;
background:#f2f2f2;
border:1px#39csolid;
text-align:center;
font-size:14px;
font-weight:700;
line-height:30px;
cursor:hand;
}
.tuckUp{
display:inline;
width:120px;
height:30px;
overflow:hidden;
background:#f2f2f2;
}
.pullDown{
display:inline;
height:auto;
}
.itema:link,.itema:visited{
display:inline;
float:left;
width:110px;
background:#ccc;
text-align:center;
color:#444;
font-size:12px;
font-weight:normal;
text-decoration:none;
line-height:25px;
margin:05px5px5px;
}
.itema:hover{
display:inline;
float:left;
background:#39c;
width:100px;
color:#FFF;
text-decoration:none;
text-align:center;
font-size:12px;
font-weight:700;
font-weight:normal;
line-height:25px;
padding:00010px;
margin:05px5px5px;
}
HTML部分:

<ulclass="menu">
<liclass="tuckUp"onmousemove="this.className=pullDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuOne
<divclass="item"><ahref="/">ITEM01</a></a><br/>
<ahref="/">ITEM02</a></a><br/>
<ahref="/">ITEM03</a><br/>
<ahref="/">ITEM04</a><br/>
<ahref="/">ITEM05</a><br/>
<ahref="/">ITEM06</a><br/></div>
</li>
<liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuTwo
<divclass="item"><ahref="/">ITEM01</a><br/>
<ahref="/">ITEM02</a><br/>
<ahref="/">ITEM03</a><br/>
<ahref="/">ITEM04</a><br/></div>
</li>
<liclass="tuckUp"onmou搜索引擎优化ver="this.className=pullDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuThree
<divclass="item"><ahref="/">ITEM01</a><br/>
<ahref="/">ITEM02</a><br/>
<ahref="/">ITEM03</a><br/>
<ahref="/">ITEM04</a><br/>
<ahref="/">ITEM05</a><br/></div>
</li>
<liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuFour
<divclass="item"><ahref="/">ITEM01</a><br/>
<ahref="/">ITEM04</a><br/>
<ahref="/">ITEM05</a><br/></div>
</li>
<liclass="tuckUp"onmou搜索引擎优化ver="this.className=pUllDown"onmou搜索引擎优化ut="this.className=tuckUp">MenuFive
<divclass="item"><ahref="/">ITEM01</a><br/>
<ahref="/">ITEM02</a><br/>
<ahref="/">ITEM03</a><br/>
<ahref="/">ITEM04</a><br/>
<ahref="/">ITEM05</a><br/></div>
</li>
</ul>
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS+XHTML制造的复杂网页下拉菜单

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块