`
Anny
  • 浏览: 39304 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

一个漂亮的CSS菜单

阅读更多
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu - Vertical</title>
<style type="text/css">
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}

/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
 margin: 0;
 border: 0 none;
 padding: 0;
 width: 160px; /*For KHTML*/
 list-style: none;
}

ul#navmenu li {
 display: block !important; /*For GOOD browsers*/
 display: inline; /*For IE*/
 position: relative;
}

/* Root Menu */
ul#navmenu a {
 border: 1px solid #FFF;
 border-right-color: #CCC;
 border-bottom-color: #CCC;
 padding: 0 6px;
 display: block;
 background: #EEE;
 color: #666;
 font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
 height: auto !important;
 height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
 background: #CCC;
 color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
 background: #EEE;
 color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
 background: #CCC;
 color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
 display: none;
 position: absolute;
 top: 0;
 left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
 display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
 display: block;
}

</style>
<script type="text/javascript">
 <!--
navHover = function() {
  var lis = document.getElementById("navmenu").getElementsByTagName("LI");
  for (var i=0; i<lis.length; i++) {
    lis[i].onmouseover=function() {
      this.className+=" iehover";
    }
    lis[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    }
  }
}
if (window.attachEvent) window.attachEvent("onload", navHover);
-->
</script>
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<hr />
<ul id="navmenu">
 <li><a href="#">Blog</a></li>
 <li><a href="#">Work +</a>
 <ul>
 <li><a href="#">Websites +</a>
 <ul>
   <li><a href="#">qrayg</a></li>
 <li><a href="#">qArcade</a></li>
 <li><a href="#">qLoM</a></li>
 <li><a href="#">qDT</a></li>
 </ul>
 </li>
 <li><a href="#">Pen and Ink</a></li>
 <li><a href="#">Free Interfaces</a></li>
 </ul>
 </li>
 <li><a href="#">Learn +</a>
 <ul>
 <li><a href="#">Fireworks +</a>
 <ul>
 <li><a href="#">aquaButton</a></li>
 <li><a href="#">aquaButton2</a></li>
 <li><a href="#">waterDrop</a></li>
 <li><a href="#">lightFX</a></li>
 <li><a href="#">lightFX2</a></li>
 </ul>
 </li>
 <li><a href="#">CSS +</a>
 <ul>
 <li><a href="#">footerStick</a></li>
 <li><a href="#">spriteNav</a></li>
 <li><a href="#">@import</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Info</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</body>
</html>

分享到:
评论

相关推荐

    17种漂亮css导航菜单

    以下是对"17种漂亮css导航菜单"这一主题的详细解读。 1. **水平导航条**:这是最常见的导航菜单形式,菜单项水平排列,通常置于网页顶部。通过CSS,我们可以设置背景色、字体样式、鼠标悬停效果等,使其既美观又...

    一款漂亮实用的OA系统左侧DIV+CSS菜单

    【标题】:“一款漂亮实用的OA系统左侧DIV+CSS菜单”揭示了这个资源是一个专为OA(Office Automation,办公自动化)系统设计的界面元素,主要关注于左侧的导航菜单。这种菜单是基于HTML中的`&lt;div&gt;`元素和CSS...

    15个精选超级漂亮div+css菜单下载(不下后悔)

    这里的"15个精选超级漂亮div+css菜单下载(不下后悔)"是一个资源集合,提供了15款设计精美、功能实用的Div+CSS导航菜单,适合用于网站开发和设计中,提升用户体验。下面将详细讲解Div+CSS菜单的设计原理、重要性以及...

    css 漂亮的菜单按钮

    在"css 菜单生成工具"这个压缩包文件中,可能包含了一个可以帮助设计师快速生成CSS菜单按钮的工具。这种工具通常会提供预设样式和自定义选项,以简化设计过程。你可以通过选择不同的模板、颜色和效果,生成符合需求...

    CSS菜单栏 超级强大

    下拉菜单是菜单栏的一个重要功能,它可以在用户点击主菜单项时显示子菜单。通过改变`display`属性并使用相对和绝对定位,可以实现下拉菜单的显示与隐藏。 七、自定义形状与边框效果 CSS还可以用来创建各种形状的...

    分享一款漂亮的CSS3车轮菜单

    【CSS3车轮菜单】是一种创新的网页交互设计,它利用了CSS3的特性来创建一个形状类似车轮的多选项菜单。这种菜单通常由中心点辐射状分布的多个选项组成,用户可以通过点击或悬停在中心点上来展开或选择菜单项。在网页...

    div+css菜单

    1. HTML结构:创建包含菜单项的元素,每个菜单项为一个子。 2. CSS选择器:使用class或id选择器定位到每个菜单项,设置其样式。 3. 层叠原则:通过z-index控制菜单的层次关系,决定哪个菜单在前,哪个在后。 4. 定位...

    超漂亮的仿MAC的CSS菜单

    在构建仿MAC的CSS菜单时,我们需要关注以下几个关键知识点: 1. **设计风格**:MAC菜单通常采用扁平化设计,强调色彩的和谐与对比,以及清晰的边角和线条。设计时应避免过多的阴影和渐变效果,追求简约而不失质感。...

    9个样式漂亮的WEB网站CSS菜单.rar

    "9个样式漂亮的WEB网站CSS菜单.rar" 这个标题指出这是一个包含九种不同设计样式的CSS菜单资源,适用于网页设计。"WEB网站CSS菜单"表明这些菜单是用CSS(层叠样式表)语言创建的,专为网页界面设计,用于导航或用户...

    两款超级漂亮实用的CSS导航菜单

    1. **滑动过渡菜单**:这种菜单在鼠标悬停时会有一个平滑的过渡效果,可以是展开子菜单,也可以是改变当前选中项的背景色。实现方法通常使用CSS的`transition`属性,结合`:hover`伪类来触发效果。例如,可以设置`...

    十分漂亮的纯CSS透明展开菜单打包

    7. **浏览器兼容性**:纯CSS菜单通常需要考虑各种浏览器的兼容性,尤其是对于较旧版本的浏览器,可能需要使用某些前缀(如`-webkit-`)来确保效果在所有浏览器中都能正常工作。 8. **实际应用**:这种菜单适用于多...

    23种漂亮的纯CSS导肮菜单

    "23种漂亮的纯CSS导航菜单"是一个集合,展示了如何仅使用CSS(Cascading Style Sheets)来创建功能强大且视觉吸引人的导航菜单。纯CSS意味着不依赖JavaScript或其他编程语言,这使得这些菜单在各种设备和浏览器上...

    10大经典CSS3菜单应用欣赏

    这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常...

    漂亮的CSS3弹性导航下拉菜单代码

    通过CSS变量,我们可以设置一个全局变量来控制菜单项的颜色,然后在不同的菜单项中引用这个变量,轻松改变颜色。如果使用类选择器,可以通过给每个菜单项添加特定的类来分别设置颜色。 在提供的文件列表中,`index....

    漂亮CSS导航菜单DIY

    "漂亮CSS导航菜单DIY"是一个专为设计师和开发者准备的资源,旨在通过CSS技术创建美观且实用的导航菜单。这个压缩包包含了必要的文件,使你能快速地将这些设计应用到自己的HTML页面中。 首先,CSS(Cascading Style ...

    纯CSS3打造动感漂亮的扇形菜单

    在这个项目中,我们将利用CSS3的旋转、变换、过渡和伪类等特性,打造出一个具有视觉吸引力的扇形菜单。 首先,我们需要理解扇形菜单的基本结构。这个菜单由一系列围绕中心点排列的元素组成,每个元素代表一个菜单项...

    5款漂亮的纯CSS下拉菜单

    5. **过渡效果**:CSS的`transition`属性允许我们在改变一个或多个CSS属性时添加平滑的动画效果。在下拉菜单中,这可以用于控制菜单项在鼠标悬停时的展开和收缩,提升用户体验。 6. **响应式设计**:考虑到不同设备...

Global site tag (gtag.js) - Google Analytics