菜单
代码思路说明:
1、一级菜单用静态文字,无需动作css即可完成;
2、二级以后的菜单,都需要额外的css代码:相对定位,鼠标跟随,展示与隐藏,模块化,列表化显示等待;
3、html代码做好菜单与子菜单之间的嵌套(可多级循环),并调用css代码;
4、完成。
效果图如下:
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>商城分类导航菜单</title> <style> body{font-size: 14px; margin: 100px; padding: 0;} .afcl{*zoom: 1;} .afcl:after{content:''; display:block; clear:both; font-size:0; height:0; line-height:0; overflow:hidden;} a {text-decoration:none;} a:hover{color: #FF3300;} .my_category{ border:solid 1px #b60134; background: #F2F2F2; width: 198px;} .my_category .parent{position: relative; border-bottom: solid 1px #fff} .my_category .parent p {margin: 0; border: solid 1px #F2F2F2; padding:0 5px 0 20px; height: 28px; line-height: 28px; background: url(dot.gif) no-repeat 8px 14px; cursor: pointer;} .my_category .parent p a {color:#333333; font-size:14px; display: block;} .my_category .parent p a:hover {color:#d6290b;} .my_category .parent p s{background: url(dot.gif) no-repeat 5px -15px; width: 10px; height: 28px; display: block; position: absolute; right: 5px; top: 1px; z-index:99;} .my_category .parent .subs{display: none; position: absolute; left: 192px; top: 0; background: #fff; z-index: 98; padding: 10px;} .my_category .parent .subs dl{line-height: 30px; border-bottom: solid 1px #EEE; margin: 0; padding: 0;} .my_category .parent .subs dt{font-weight: bold; margin: 0; padding: 0;} .my_category .parent .subs dt a{color: #E4393C;} .my_category .parent .subs dd {margin: 0; padding: 0;} .my_category .parent .subs dd a{color: #666;} .my_category .parent .subs dd a:hover{color: #E4393C;} .my_category .parent .subs dt, .my_category .parent .subs dd{padding: 0 5px; display: block; float: left;} .my_category .parent .subs dt a, .my_category .parent .subs dd a{border-right: solid 1px #EEE; padding-right: 5px;} .my_category .activep .subs{display: block; border: solid 1px #DDD; width: 350px; box-shadow: 0 0 10px #DDDDDD} .my_category .activep p{border: solid 1px #DDD; background-color: #fff; overflow: hidden; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; box-shadow: 0 0 8px #DDD;} .my_category .activep p s{background: #fff;} </style> </head> <body> <div class="my_category"> <div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'"> <p><a href="javascript:;">一级分类-1</a><s></s></p> <div class="subs"> <dl class="afcl"> <dt><a href="javascript:;">二级分类-1</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> <a href="{$childer.url}">三级分类-3</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-2</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-3</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> </div> </div> <div class="parent" onmouseover="this.className='parent activepAƆ|{©�#›•l\¢諲ut="this.className='parent'"> <p><a href="javascript:;">一级分类-2</a><s></s></p> <div class="subs"> <dl class="afcl"> <dt><a href="javascript:;">二级分类-1</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> <a href="{$childer.url}">三级分类-3</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-2</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-3</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> </div> </div> <div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'"> <p><a href="javascript:;">一级分类-3</a><s></s></p> <div class="subs"> <dl class="afcl"> <dt><a href="javascript:;">二级分类-1</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> <a href="{$childer.url}">三级分类-3</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-2</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-3</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> </div> </div> <div class="parent" onmouseover="this.className='parent activep'" onmouseout="this.className='parent'"> <p><a href="javascript:;">一级分类-4</a><s></s></p> <div class="subs"> <dl class="afcl"> <dt><a href="javascript:;">二级分类-1</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-2</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> <dl class="afcl"> <dt><a href="javascript:;">二级分类-3</a></dt> <dd> <a href="{$childer.url}">三级分类-1</a> <a href="{$childer.url}">三级分类-2</a> </dd> </dl> </div> </div> </div> </body> </html>
越努力越幸运