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 ...
随机推荐
- 学习CodeIgniter框架之旅（二）继承自定义类
在很多情况下,框架类并不能满足项目的需求,这时候需要程序要自定义一些类,比如说基类等等,对比了TP框架,CI框架目前好像还没加入命名空间,这点TP做得比较好,不用特殊的处理就可以随便继承自定义的类,只 ...
- 2.0、Hibernate框架的简单搭建
一.Hibernate:是一个开放源代码的对象关系映射框架,对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句 ...
- 学习实战java虚拟机的计划图
啥也不说了,实战java虚拟机,好好学习,天天向上! <实战java虚拟机>一书Q交流群:397196583
- GridLayout 使用
上次做了一个小键盘,请见:PopupWindow 使用. 效果是这样的: 可以看到,上面的按键是不一样大小的.因为是用LinearLayout布局,用的Button样式也是默认的.数字键和文字键的大小 ...
- webstorm快捷键大全
使用webstorm一段时间了,这里分享一下常用到的快捷键,不用死记,孰能生巧! Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*-*/ ) Shift+F6 重构-重命名 Ctrl+ ...
- 【Unity3d】火炬之光的X射线效果
http://www.cnblogs.com/dosomething/archive/2012/04/03/2431149.html 人物和摄像机之间存在例如墙壁等的阻挡时 可以修改阻挡材质的alp ...
- BZOJ 2081: [Poi2010]Beads
Description 问把n截成每个长度后不同子串个数. Sol 调和极数+Hash. 首先这是一个式子 \(n\sum_{i=1}^n \frac {1}{i}\) . 这东西就是调和极数再乘上 ...
- PPM图片格式及其C读写代码
PPM图像格式介绍 PPM图像格式是由Jef Poskanzer 大叔,在我出生那一年,也就是1991年所创造的,碰巧的是PPM也是天蝎座. PPM(Portable Pixmap Format)还有 ...
- composer 使用笔记
使用composer 更新项目比如: composer create-project topthink/think wwwroot dev-master --prefer-dist提示openssl异 ...
- Ajax发送POST请求SpringMVC页面跳转失败
问题描述:因为使用的是SpringMVC框架,所以想使用ModelAndView进行页面跳转.思路是发送POST请求,然后controller层中直接返回相应ModelAndView,但是这种方法不可 ...