展会信息港展会大全

jquery CSS导航下拉菜单代码
来源:互联网   发布日期:2016-03-25 16:31:51   浏览:2588次  

导读:为你提供一款jquery CSS导航下拉菜单代码哦,以前都是js css下拉菜单,今天我们提供一款jquery的下拉菜单代码。代码如下 复制代码 ...

为你提供一款jquery CSS导航下拉菜单代码哦,以前都是js css下拉菜单,今天我们提供一款jquery的下拉菜单代码。

代码如下

复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<html>

<head>

<title>伸缩的菜单,用toggle()重写</title>

<style>

<!--

body{

background-color:#ffdee0;

}

#navigation {

width:200px;

font-family:arial;

}

#navigation > ul {

list-style-type:none; /* 不显示项目符号 */

margin:0px;

padding:0px;

}

#navigation > ul > li {

border-bottom:1px solid #ed9f9f; /* 添加下划线 */

}

#navigation > ul > li > a{

display:block; /* 区块显示 */

padding:5px 5px 5px 0.5em;

text-decoration:none;

border-left:12px solid #711515; /* 左边的粗红边 */

border-right:1px solid #711515; /* 右侧阴影 */

}

#navigation > ul > li > a:link, #navigation > ul > li > a:visited{

background-color:#c11136;

color:#ffffff;

}

#navigation > ul > li > a:hover{ /* 鼠标经过时 */

background-color:#990020; /* 改变背景色 */

color:#ffff00; /* 改变文字颜色 */

}

/* 子菜单的css样式 */

#navigation ul li ul{

list-style-type:none;

margin:0px;

padding:0px 0px 0px 0px;

}

#navigation ul li ul li{

border-top:1px solid #ed9f9f;

}

#navigation ul li ul li a{

display:block;

padding:3px 3px 3px 0.5em;

text-decoration:none;

border-left:28px solid #a71f1f;

border-right:1px solid #711515;

}

#navigation ul li ul li a:link, #navigation ul li ul li a:visited{

background-color:#e85070;

color:#ffffff;

}

#navigation ul li ul li a:hover{

background-color:#c2425d;

color:#ffff00;

}

-->

</style>

<script language="网页特效" src="jquery.min.js"></script>

<script language="javascript">

$(function(){

$("li").find("ul").prev().click(function(){

$(this).next().toggle();

});

$("li:has(ul)").find("ul").hide();

});

</script>

</head>

<body>

<div id="navigation">

<ul id="listul">

<li><a href="#">home</a></li>

<li><a href="#">news</a>

<ul>

<li><a href="#">lastest news</a></li>

<li><a href="#">all news</a></li>

</ul>

</li>

<li><a href="#">sports</a>

<ul>

<li><a href="#">basketball</a></li>

<li><a href="#">football</a></li>

<li><a href="#">volleyball</a></li>

</ul>

</li>

<li><a href="#">weather</a>

<ul>

<li><a href="#">today's weather</a></li>

<li><a href="#">forecast</a></li>

</ul>

</li>

<li><a href="#">contact me</a></li>

</ul>

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港