HTML导航栏

先看效果(两种,1:自己写样式,写交互,2.用jQueryUI 的menu),如下图

 

第一种:       第二种:  

第一种样式:

然后就开始准备了,单村用js和css也可以写出来,不过既然有jquery我就偷个懒吧

1.去http://jquery.com/download/下载jquery

2.开始写html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> <!-- 设置编码-->
	<link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css样式-->
	<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery-->
	<script type="text/javascript" src="js/js.js"></script><!--引入自己的js -->
	<title>菜单测试</title>
</head>
<body>
	<ul><!-- 菜单栏基本样式-->
		<li class="hmain">
			<a href="#">菜单1</a>
			<ul>
				<li>
					<a href="#">子菜单1</a>
				</li>
				<li>
					<a href="#">子菜单2</a>
				</li>
			</ul>
		</li>
		<li class="hmain">
			<a href="#">菜单2</a>
			<ul>
				<li>
					<a href="#">子菜单1</a>
				</li>
				<li>
					<a href="#">子菜单2</a>
				</li>
			</ul>
		</li>
		<li class="hmain">
			<a href="#">菜单3</a>
			<ul>
				<li>
					<a href="#">子菜单1</a>
				</li>
				<li>
					<a href="#">子菜单2</a>
				</li>
			</ul>
		</li>
	</ul>
</body>
</html>

3.写css样式

ul,li{
	list-style: none; /*取消ul,li前面的小点 */
}
ul{
	padding: 0;   /*取消ul的缩进(默认会有一个缩进)*/
	margin: 0;
}

li{
	background-color: #eeeeee;
}
a{
	text-decoration: none;  /* 取消超链接的下划线*/
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top:3px;
	padding-bottom: 3px;
}
.hmain{
	background-image: url(../images/title.jpg);  /* 设置导航背景*/
	background-repeat: repeat-x;  /* 设置背景图片的排列方式*/
	width: 100px;
}
.hmain a{
	color: red;
}
.hmain li a{
	color: black;
}
.hmain ul{
	display: none;  /* 默认隐藏二级菜单栏*/
}

.hmain{
	float: left;   /* 导航定位(水平)*/
	margin-right: 2px;  
}

4到了交互的时候了自己的js,一句话搞定,先找到ul下的a,绑定鼠标滑过事件

$(document).ready(function(){
var mean = $(".hmain>a");
mean.on("mouseenter mouseleave", function(){
var ulNode = $(this).next("ul");
      ulNode.toggle("normal");
});
});

初学者,有什么不对的地方请指出,谢谢

 第二种样式:

然后就开始准备了,单村用js和css也可以写出来,不过既然有jquery我就偷个懒吧

1.去http://jquery.com/download/下载jquery(需要一个文件jquery-3.1.0.min.js)

   去http://jqueryui.com/download/下载jqueryUI(需要两个文件jquery-ui.min.js,jquery-ui.min.css)

2.开始写html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> <!-- 设置编码-->
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><!-- 引入jquery-->
    <script type="text/javascript" src="js/jquery-ui.min.js"></script><!-- 引入jqueryui-->
    <script type="text/javascript" src="js/js.js"></script><!--引入自己的js -->
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"><!-- 引用jqueryUIcss样式-->
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引用css样式-->
    <title>菜单测试</title>
</head>
<body>
    <ul class="menu"><!-- 菜单栏基本样式-->
        <li class="hmain">
            <a href="#">菜单1</a>
            <ul>
                <li>
                    <a href="#">子菜单1</a>
                </li>
                <li>
                    <a href="#">子菜单2</a>
                </li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">菜单2</a>
            <ul>
                <li>
                    <a href="#">子菜单1</a>
                </li>
                <li>
                    <a href="#">子菜单2<
;/a>
                </li>
            </ul>
        </li>
        <li class="hmain">
            <a href="#">菜单3</a>
            <ul>
                <li>
                    <a href="#">子菜单1</a>
                </li>
                <li>
                    <a href="#">子菜单2</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

3.写css样式

ul,li{
    list-style: none; /*取消ul,li前面的小点 */
}
ul{
    padding: 0;   /*取消ul的缩进(默认会有一个缩进)*/
    margin: 0;
}

li{
    background-color: #eeeeee;
}
a{
    text-decoration: none;  /* 取消超链接的下划线*/
    padding-left: 20px;
    display: block;
    width: 80px;
    padding-top:3px;
    padding-bottom: 3px;
}
.hmain{
    width: 100px;
}
.hmain a{
    color: red;
}
.hmain li a{
    color: black;
}
.hmain ul{
    display: none;  /* 默认隐藏二级菜单栏*/
}

.hmain{
    float: left;   /* 导航定位(水平)*/
    margin-right: 2px;  
}

4.交互

$(document).ready(function(){
var menu = $(".menu");
menu.menu({position:{at: "left bottom"}});
});

很简单啦

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » HTML导航栏

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情