导航:首页 > 编程语言 > 左侧导航菜单代码

左侧导航菜单代码

 发布时间：2025-02-16 12:42:30

『壹』 如何利用纯CSS制作二级或多级导航菜单

本人亲测下面这些代码是可以实现二级或多级导航菜单的。

<style>

<!--

* {margin:0px;padding:0px;}

body {overflow:scroll;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;}

a {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000;text-decoration:none;}


.menu {position:relative;width:1000px;background-color:#360;}

.menu ul {list-style-type:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:22px;border:1px solid #000;}

.menu table {position:absolute; top:0; left:0;}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible;}

.menu a{display:block;background:#360;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #360;}

.menu a:hover{background:#690;color:#000;}

.menu ul ul,

.menu ul ul li {clear:both;text-align:left;}

.menu ul ul li a{display:block;width:100px;height:15px;}

.menu ul ul li a:hover{background:#690;}

-->

</style>

<body>

<div class="menu">

<ul>

<li><a href="#">一级菜单_01

<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">二级菜单_01</a></li>

<li><a href="#">二级菜单_02</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

</body>

『贰』 淘宝旺铺装修导航条左侧下拉菜单如何设置css代码

首先进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，选择“显示设置”选项卡

第一部分、静态背景颜色
1、首页/店铺动态/其它导航类目的背景色，这里设为红色
.skin-box-bd .menu-list .link{background:red;}
2、所有分类的背景色（最左边的），一样设为红色
.all-cats .link{background:red;}
到这里，发觉右边的颜色还没有变呢，好的，接着下一步
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些
.skin-box-bd .menu-list{background:red;}
注意观察，最右边还有一丝地方没有变
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色
.skin-box-bd{background:red;}
小结：有点成功感了！换换其它颜色试试看吧
背景色最好搭配页头背景图，才能整体大气美观

第二部分、分隔线、静态文字的颜色
5、首页等分类的右边的分隔线颜色，设为白色
.menu-list .menu{border-color:white;}
6、所有分类的右边的分隔线颜色，设为白色
.all-cats .link{border-color:white;}
7、首页/店铺动态/其它导航类目的文字颜色
.menu-list .menu .title{color:yellow;}
8、所有分类的文字颜色（最左边那个）,
.all-cats .link .title{color:yellow;}
小结：其实原来默认文字的颜色也挺好的

第三部分、分类下的颜色
9、二级分类的背景色，设为灰色
.popup-content{background:gray;}
10、三级分类的背景色，我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二级分类的文字颜色，设为黄色
.popup-content .cat-name{color:yellow;}
12、三级分类的文字颜色。（如果后面要鼠标滑过变色<21.22>，这句要写）
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
小结：上面这句不写，和二级分类颜色是一样的

第四部分、鼠标滑过变背景色
13、鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为蓝色
.menu-list .menu-hover .link{background:blue;}
14、鼠标滑过所有分类（最左边那个）变换背景色，这同样设为蓝色
.all-cats-hover .link{background:blue;}
15、鼠标滑过所有分类下的二级分类变换背景色，这设为蓝色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
16、鼠标滑过所有分类下的三级分类变换背景色，这设为深蓝色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
17、鼠标滑过导航类目下的宝贝分类变换背景色，这设为蓝色
.menu-popup-cats .sub-cat-hover{background:blue;}
小结：这个所有分类，与首页后面的，是要分开设计的

第五部分、鼠标滑过变文字颜色
18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色，这设为红色
.menu-list .menu-hover .title{color:red;}
19、鼠标滑过所有分类（最左边那个）变换文字颜色，这同样设为红色
.all-cats-hover .link .title{color:red;}
20、鼠标滑过导航类目下的宝贝分类变换文字颜色，这设为红色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
21、鼠标滑过所有分类下的二级分类变换文字颜色，这设为红色
.popup-content .cat-hd-hover .cat-name{color:red;}
22、鼠标滑过所有分类下的三级分类变换文字颜色，这设为红色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
小结：这部分还是默认白色的好看

第六部分、导航项目激活状态
23、激活项目的文字背景色（难看，所以none）、文字颜色（选白色）
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
24、激活项目的项目背景色（项目框），选紫色
.skin-box-bd .menu-list .menu-selected .link{background:purple;}

阅读全文

与左侧导航菜单代码相关的资料

热点内容
js怎么设置打印横向边距 浏览：726
慧编程里的画笔用不了怎么办 浏览：19
第七次人口普查数据哪里看 浏览：126
plc编程mon是怎么缩小 浏览：633
北大青鸟网络主要课程 浏览：63
ug编程t形槽怎么做 浏览：283
技术性文件的分类有哪些 浏览：98
iphone文件到电脑 浏览：647
证券pdf文件的电子录入 浏览：214
htmlform上传文件 浏览：715
电脑中毒了每个文件夹多出图片 浏览：228
苍南如何制作一个营销网站 浏览：933
刻录进光盘的文件缓存在哪里 浏览：94
开发影视网站怎么取得影视资源 浏览：565
平安wifi登录网络异常 浏览：638
u盘病毒清除文件会不会消失 浏览：126
数独游戏下载安卓 浏览：734
视频转文件夹怎么弄 浏览：200
电工模拟试题app下载 浏览：830
cad文件旧版本找回 浏览：572

友情链接