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:; /*取消ul的缩进（默认会有一个缩进）*/
margin:;
}
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"}});
});
很简单啦
HTML导航栏的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- SAP CRM 将组件整合至导航栏中
到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- 分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
- jquery版滑块导航栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- 美团HD(2)-设置导航栏内容
DJHomeViewController.m #import "DJHomeViewController.h" #import "DJConstantValue.h&qu ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
随机推荐
- 移动Web初级入门
最好的阅读是输出. –玉伯 即将开始涉入移动Web了,有点小兴奋也有点小紧张,希望能在未来的团队里带来一些价值.记录一下我现在所认识的移动Web. 原文摘自我的前端博客,欢迎大家来访问 原文地址:ht ...
- iOS9网络适配(ATS)
[转]iOS9 new_001:iOS9网络适配(ATS) 下载Xcode7打开APP后大家都发现自己的APP无法联网了,why? 苹果官方文档介绍如下: App Transport Security ...
- 软工实践——github文件整理
软工实践中,整理github上文件遇到的一些问题 先扔github链接Transcend/ActivityHelper 1.原来呢我们团队的github上的文件的安排十分凌乱,没有归档.把说明文档.源 ...
- Collection小结
Collection:
- Tomcat的设定
tomcat 版本 apache-tomcat-7.0.68-windows-x64 1.解压文件到 eclipse文件夹中,这个放哪都可以,个人习惯而已 2.tomcat目录结构 图片为盗图- 3 ...
- yum 保存下载包
--- 1 --- $ sudo yum install yum-plugin-downloadonly $ sudo yum install --downloadonly --downloaddir ...
- sort()基础知识总结+超简短的英文名排序写法
结合前些天学的箭头函数我想到一种非常简短的sort排序写法:(这可能是最短的英文名排序方法了) 贴出来大家一起探讨一下: [4,1,2,32].sort((x,y)=>x>y); //[1 ...
- python正则表达式re
Python正则表达式: re 正则表达式的元字符有. ^ $ * ? { [ ] | ( )．表示任意字符［］用来匹配一个指定的字符类别,所谓的字符类别就是你想匹配的一个字符集,对于字符集中的字符可 ...
- select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！
第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...
- 一个简单的判断浏览器是否为IE9以下的方法
if(!-[1,]){ //是IE placeHolderIE9_(); }else{ //非IE if(navigator.userAgent.indexOf("MSIE 9.0" ...