横/纵向二级导航菜单

最新推荐文章于 2021-05-30 22:56:50 发布
最新推荐文章于 2021-05-30 22:56:50 发布
阅读量636 收藏
点赞数
分类专栏： CSS 文章标签： CSS IE HTML 

<!--[if ie 6]>
<style>
#navigation ul li { float: left; height: 1%; }
#navigation ul li a { height: 1%; }

#topNav ul li { float: left; height: 1%; }
#topNav ul li a { height: 1%; }
</style>
<![endif]-->


<body onload="init();">
<div id="topNav">
<ul>
	<li><a href="#">Recipes</a>
	<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li>
	<a href="#">Contact Us</a>
		<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Buy Online</a></li>
</ul>
<div style="clear:both;"></div>
</div>

<div style="height:200px;"></div>
<hr solid/>

<div id="navigation">
<ul>
	<li><a href="#">Recipes</a>
	<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Contact Us</a>
		<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>


#navigation {
	width: 200px;
}

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

#navigation li {
	position:relative;
	border-bottom: 1px solid #ED9F9F;
}

#navigation li a:link,#navigation li a:visited {
	font-size: 90%;
	display: block;
	padding: 0.4em 0 0.4em 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	background-color: #B51032;
	color: #FFFFFF;
	text-decoration: none;
}

#navigation li a:hover {
	background-color: #711515;
	color: #FFFFFF;
}

#navigation ul ul {
	/*margin-left: 12px;*/
}

#navigation ul ul li {
	border-bottom: 1px solid #711515;
	margin: 0;
	width:180px;
}

#navigation ul ul a:link,#navigation ul ul a:visited {
	background-color: #ED9F9F;
	color: #711515;
}

#navigation ul ul a:hover {
	background-color: #711515;
	color: #FFFFFF;
}
#navigation li ul a:link,#navigation li ul a:visited {
	border-left: none;/*12px solid #711515;*/
}

#navigation li ul {
  position: absolute;
  left: 200px; /* Set 1px less than menu width */
  top: 0;
  display:none;
  }
/*
------------------------------------------------------------------
*/
#topNav ul, li{
	display:block;
	list-style: none;
	margin: 0;
	padding: 0;
}


#topNav ul li{
	width:180px;
	float: left;
	position:relative;
	border-right: 1px solid #ED9F9F;
	text-align:center;
}

#topNav li a:link,#topNav li a:visited {
	font-size: 90%;
	display: block;
	padding-bottom: 0.4em;
	border-top: 8px solid #711515;
	background-color: #B51032;
	color: #FFFFFF;
	text-decoration: none;
}


#topNav ul ul a:link,#topNav ul ul a:visited {
	border-top:none;
	border-left:10px solid #711515;
	padding-top:0.4em;

	background-color:#ED9F9F;
	border-bottom: 1px solid #711515;
	color:#711515;
}
#topNav ul ul a:hover,#topNav ul li a:hover {
	background-color: #711515;
	color: #FFFFFF;
}

#topNav li ul {
  position: absolute;
  top: 29px; 
  left: 0px;
  display:none;
}



function init(){
    $('#navigation ul li').bind('mouseover',{},doMouseOver); 
    $('#navigation ul li').bind('mouseout',{},doMouseOut); 
    $('#topNav ul li').bind('mouseover',{},doMouseOver); 
    $('#topNav ul li').bind('mouseout',{},doMouseOut); 
}

function doMouseOver(event){
    var ulEl = $(this);
    var subNav = ulEl.children('.subNav');
    if(subNav){
        $(subNav).css('display','block');
    }
}
function doMouseOut(event){
    var ulEl = $(this);
    var subNav = ulEl.children('.subNav');
    if(subNav){
        $(subNav).css('display','none')
    }
}



[img]http://dl.iteye.com/upload/attachment/281289/69ccc41c-1b59-3efb-8339-194594bef446.bmp[/img]
iteye_12132
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纵向二级菜单
微信号codek2 专注于 Android 开源项目源码解析 开源项目分享
07-22 1397
CSS Menu - Vertical h1 { font: bold 16px Arial, Helvetica, sans-serif; } p { font: 11px Aria
学习笔记（2）纵向导航菜单及二级弹出菜单
weixin_44433499的博客
04-24 1099
纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 1.纵向列表 先新建一个页面，div 、ul、li。 <div id="menu"> <ul> <li>首页</li> <li>网页版式布局</li> <li>div+css教程</li...
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
12-19
js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单
html二级菜单纵向,纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快
weixin_30569303的博客
05-30 1312
制作二级导航菜单(纵向)#menu{width: 200px;border: 1px solid #999;}#menu ul{margin: 0px;padding: 0px;list-style: none;/* 隐藏默认列表符号*/}#menu ul li{background: #06C;height: 35px;line-height: 35px; /*行距*/text-align: ...
十天学会Div+CSS第四天之【纵向导航与二级菜单】
weixin_34138056的博客
08-07 238
一、纵向列表纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。 &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/li&g...
纵向导航菜单及二级弹出菜单(实践可行)
xu_201205的专栏
08-14 734
演示效果如上 代码; 菜单栏 #menu ul {     margin: 0px;     padding: 0px;     list-style-type: none; } body {     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size: 12px;
纵向二级导航
开心每天，水滴石穿。
02-06 677
dl         {             width: 100px;             height: 170px;             text-align: center;         }         dl dd         {             margin: 0px;             border:1px solid black
可点击展开与收缩的左侧纵向二级导航菜单
11-20
在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...
Android实现横向二级菜单
09-02
本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...
JavaScript实现鼠标滑过高亮显示二级菜单的纵向3级的导航菜单源码
05-18
本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果：当鼠标滑过一级菜单时，对应的二级甚至三级菜单高亮显示，形成一个垂直的多层次导航结构。这样的设计既提升了用户体验，也使网站的导航...
jquery 横纵向两种二级菜单
03-20
NULL 博文链接：https://hui525.iteye.com/blog/800735
css纵向导航菜单及二级弹出菜单
12-23
纵向导航菜单及二级弹出菜单的CSS代码。直接看html上面的style标签。
下拉导航菜单+垂直显示二级自菜单
10-25
下拉导航菜单+垂直显示二级自菜单效果： 鼠标移动上去，会垂直显示二级子菜单，效果非常好。 采用HTML+JavaScirp
漂亮的CSS二级竖向导航菜单
06-06
很漂亮的CSS下拉菜单导航，喜欢的童鞋可以下载试用下哦！
漂亮的纵向二级菜单，只展开一个
05-09
一个纵向下拉菜单~而二级菜单，可以增加到多级，灰色，只展开一个，其他默认收回
纯css打造绿色横向二级导航菜单代码
迷失曾经
04-03 3528
纯css打造绿色横向二级导航菜单代码 演示图: 详细代码: 纯css打造绿色横向二级导航菜单代码--免费模板 body {behavior: url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/csshover3.htc");} #menu li .drop {backgrou
纵向导航菜单，点击产生二级菜单
chenweihua556的专栏
05-22 389
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;ERP信息管理系统&lt;/title&gt; &lt;style type="text/css"&g
关于竖向二级导航折叠问题
styleling的博客
06-01 1854
自己用的方法，不能实现第二次点击的时候折叠二级导航： 精选品牌 兰芝 御泥坊 珀莱雅 相宜本草 热门功效 去黑头 专业洗护 强力去屑 多芬男士
超级简单实现竖向折叠二级菜单
Dimple_z的博客
02-09 1967
用jQuery的几个方法快速实现竖向折叠二级菜单,点击一级菜单出现二级菜单，带动画效果 注意点：不要给一级菜单的li设定宽度，因为点击后li会自然撑大 <script> window.onload=function(){ $('.nav li').click(function(){ $(this).child...
web标准学习：纵向导航菜单与二级弹出菜单制作
5. **纵向二级列表**：当需要在主菜单项下展示更多子类别时，可创建二级列表。在鼠标悬停或点击主菜单项时，二级列表弹出。这通常涉及`<ul>`嵌套在其他`<li>`中，并利用CSS的`display`属性来控制可见性。 6. **相对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值