半透明效果导航菜单

<!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</a>">

<head>

<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />

<title>半透明效果导航菜单</title>

<style type="text/css">

<!--

#navcontainer

{

background: #f0e7d7;

margin: 0 auto;

padding: 1em 0 0 0;

font-family: georgia, serif;

text-transform: lowercase;

}

/* to stretch the container div to contain floated list */

#navcontainer:after

{

content: ".";

display: block;

line-height: 1px;

font-size: 1px;

clear: both;

}

ul#navlist

{

list-style: none;

padding: 0;

margin: 0 auto;

width: 80%;

font-size: 0.8em;

}

ul#navlist li

{

display: block;

float: left;

width: 15%;

margin: 0;

padding: 0;

}

ul#navlist li a

{

display: block;

width: 100%;

padding: 0.5em;

border-width: 1px;

border-color: #ffe #aaab9c #ccc #fff;

border-style: solid;

color: #777;

text-decoration: none;

background: #f7f2ea;

}http://www.huiyi8.com/jiaocheng/

文档教程

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a

{

background: #f0e7d7;

color: #800000;

}

ul#navlist li a:hover, ul#navlist li#active a:hover

{

color: #800000;

background: transparent;

border-color: #aaab9c #fff #fff #ccc;

}

-->

</style>

</head>

<body>

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#/" _fcksavedurl="#/" id="current">特效</a></li>

<li><a href="#" _fcksavedurl="#">特效</a></li>

<li><a href="#" _fcksavedurl="#">特效</a></li>

<li><a href="#" _fcksavedurl="#">特效</a></li>

<li><a href="#" _fcksavedurl="#">特效</a></li>

<li><a href="#" _fcksavedurl="#">特效</a></li>

</ul>

</div>

</body>

</html></iframe></body></html>

时间: 2024-08-27 20:12:40

半透明效果导航菜单的相关文章

实用js+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-Typ

android.support.v4.widget.DrawerLayout 抽屉效果导航菜单

抽屉效果导航菜单图示 如图所示,抽屉效果的导航菜单不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面左上角的一个按钮点击,菜单就滑出来,而且感觉能放很多东西 概况:实现上图所示的抽屉效果的导航菜单有以下两种方式 方式1.用SlidingDrawer: http://developer.android.com/reference/android/widget/SlidingDrawer.html 但是不知道为什么这个类官方不建议再继续用了: Deprecated since API lev

移动端的推拉效果导航菜单-支持响应式及其多层菜单

在线演示 本地下载 Off Canvas Infinity Push是一个帮助你开发推拉式移动端导航菜单的jQuery插件,支持响应式,并且支持无限多层菜单导航!

jQuery 火焰灯效果导航菜单

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

使用css3实现立体导航菜单效果

CSS3代码练习 导航html结构部分 1 <body> 2 <ul class="nav"> 3 <li><a href="#">Home</a></li> 4 <li><a href="#">Home</a></li> 5 <li><a href="#">Home</a>

很酷的伸缩导航菜单效果,可自定义样式和菜单项。

<!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-Typ

JavaScript实战(带收放动画效果的导航菜单)

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html ) 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果! 如何

爱淘宝手机版分类导航菜单弹出效果设计

来和大家一起讨论讨论爱淘宝手机版的分类导航菜单弹出效果是如何设计实现的.先来看几个截图,一个是爱淘宝官方网站的截图,另一部分是我仿照爱淘宝做的截图 先声明一下我们只是借鉴爱淘宝手机版界面来进行技术的学习,如有博友看到请各位一定要理解.此博客毫无盗用淘宝核心技术. 第一张图是爱淘宝官网的截图,后面两张是我们自己仿照做的截图. 首先分析一下要实现的功能细节 点击手机页面商品列表的图片,导航菜单会从手机的右侧出来 导航菜单下面会有一个遮盖层,这样子的作用防止用户点击最底层的商品 最底层的商品可以在遮盖

Android 抽屉效果的导航菜单实现

抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西. 关于实现,搜索了一下,有如下两种: 1.用SlidingDrawer: http://developer.android.com/reference/android/widget/SlidingDrawer.html 但是不知道为什么这个类官方不建议再继续用了: Deprecated since API level