`
mutongwu
  • 浏览: 450384 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

横/纵向二级导航菜单

    博客分类：
  • CSS
CSSIEHTML 
阅读更多 
<!--[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')
    }
}



  • 大小: 4.1 KB
分享到：
| 简单的新闻图片页面滑动展示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    可点击展开与收缩的左侧纵向二级导航菜单

    在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...

    js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单

    "js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单"是一个专门针对这种交互需求设计的功能。这个功能通常应用于那些层次结构较深、内容较多的网站，使用户能够更加方便地探索和定位信息。 在实现这样的导航...

    JQuery横向纵向导航菜单

    - 在这里，二级菜单（子菜单）隐藏在主菜单项下，可以通过CSS设置`display:none`来实现。 2. **CSS样式**： - 使用CSS定义菜单的基本样式，包括颜色、字体、边距等，以及隐藏/显示子菜单的规则。例如： ```css ...

    JavaScript实现的3级横向导航菜单源码

    在网页设计中，导航菜单是用户界面的关键部分，它帮助用户在网站的各个部分之间轻松跳转。本篇将详细介绍如何使用JavaScript实现一个三级横向导航菜单。 首先，我们需要理解基本的HTML结构。一个简单的导航菜单通常...

    JS仿FLASH横向、纵向导航菜单

    本教程将详细讲解如何使用JS来仿制Flash的横向和纵向导航菜单效果，使网页的用户体验更加丰富和动态。 一、HTML结构基础 在创建任何特效之前，首先需要构建一个基本的HTML结构，为导航菜单提供框架。通常，我们可以...

    网页纵向产品分类导航，横向二级菜单，适合商城使用.rar

    网页纵向产品分类导航，横向二级菜单，适合商城使用，类似苏宁易购网站的左侧导航菜单，与以前发布的一款仿京东的英文菜单差不多，样式和功能新颖，兼容性方面也都不错的实用菜单。

    css纵向导航菜单及二级弹出菜单

    本主题聚焦于“css纵向导航菜单及二级弹出菜单”，这是一种常见的交互式网页设计技术，尤其适用于内容层次丰富的网站。 首先，让我们详细了解纵向导航菜单。纵向菜单，也称为侧边栏菜单，通常位于网页的一侧（左侧...

    漂亮的纵向二级菜单，只展开一个

    一个纵向下拉菜单~而二级菜单，可以增加到多级，灰色，只展开一个，其他默认收回

    漂亮的CSS二级竖向导航菜单

    本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...

    JavaScript纵向2级菜单

    在这个案例中，"JavaScript纵向2级菜单"是一个实现多级导航菜单的解决方案，尤其适用于大型网站，因为它可以帮助用户更高效地浏览和定位内容。 菜单系统的设计通常分为横向和纵向两种，这里的“纵向”意味着菜单项...

    JavaScript实现鼠标滑过高亮显示二级菜单的纵向3级的导航菜单源码

    本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果：当鼠标滑过一级菜单时，对应的二级甚至三级菜单高亮显示，形成一个垂直的多层次导航结构。这样的设计既提升了用户体验，也使网站的导航...

    JavaScript实现鼠标滑过纵向3级导航菜单源码

    本主题将深入探讨如何使用JavaScript实现一个鼠标滑过时显示纵向3级导航菜单的功能。这种类型的菜单常用于网站中，它能有效地展示多层次的信息，提高用户体验。 首先，我们来了解JavaScript的基础。JavaScript是一...

    CSS3纵向导航二级下拉菜单栏.rar

    一个简单的二级导航菜单通常包含一个`&lt;ul&gt;`列表作为主菜单，其中每个`&lt;li&gt;`元素代表一级菜单项，而这些`&lt;li&gt;`元素内嵌套的另一个`&lt;ul&gt;`则表示二级菜单项。例如： ```html &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt; &lt;li&gt;&lt;a ...

    纵向下拉二级导航带缓冲效果，一级高亮，完整类

    首先，"纵向下拉二级导航"是一种常见的网页布局方式，通常用于网站的顶部或者侧边栏，以便用户能够快速切换不同的主分类，并通过下拉菜单进一步访问子分类。这种方式节省了页面空间，同时也提供了良好的可扩展性。 ...

    JavaScript实现鼠标滑过会移动的纵向3级灰色的导航菜单源码

    一个典型的3级导航菜单会包含一级菜单项，每个一级菜单项下又有二级子菜单，某些二级子菜单可能还会有三级子菜单。以下是一个简单的HTML示例： ```html 一级菜单1&lt;/a&gt; &lt;li&gt;&lt;a href="#"&gt;二级菜单1-1&lt;/a&gt;&lt;/li&gt;...

    JavaScript实现鼠标滑过图片显示纵向2级导航菜单源码

    当用户将鼠标悬停在特定的图片上时，通过JavaScript监听鼠标悬停事件（如onmouseover），可以触发一个函数，这个函数会展示预先定义好的二级导航菜单。这个菜单通常是垂直布局的，以便在有限的空间内展示更多的链接...

    JavaScript实现鼠标滑过标识一级菜单的纵向3级导航菜单源码

    在网页设计中，一级菜单通常是网站导航的核心部分，而三级导航菜单则能为用户提供更为详细的分类信息。本项目旨在实现一种效果：当用户鼠标滑过一级菜单时，对应的二级和三级菜单会垂直展开，提供丰富的导航选项。 ...

    纵向3级导航

    在描述中提到的“纵向3级导航”是指在垂直方向上展示的具有三层结构的导航菜单。通常，第一级是主要类别，第二级是次级类别，第三级则为更具体的子类别。例如，在电商网站中，一级可能是“电子产品”，二级可能是...

    Android实现横向二级菜单

    本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...

    第四天纵向导航菜单及二级弹出菜单.pdf

    在网页设计中，纵向导航菜单和二级弹出菜单是常见的布局元素，尤其在互联网应用中不可或缺。它们提供了用户友好的导航体验，帮助用户快速访问网站的不同部分。本教程主要围绕《十天学会 web 标准(div+css)》的第四天...

Magicbox
Global site tag (gtag.js) - Google Analytics