导航栏、菜单栏

1.进入 https://github.com/VPenkov/okayNav下载源代码

2.添加导航栏主体代码

 1 <header id="header">
 2     <a class="site-logo" href="#">
 3        Logo
 4     </a>
 5
 6     <nav role="navigation" id="nav-main" class="okayNav">
 7         <ul>
 8             <li><a href="#">首页</a></li>
 9             <li><a href="#">商品</a></li>
10             <li><a href="#">博客</a></li>
11             <li><a href="#">服务</a></li>
12             <li><a href="#">联系我们</a></li>
13             <li><a href="#">关于我们</a></li>
14             <li><a href="#">评论</a></li>
15         </ul>
16     </nav>
17 </header><!-- /header 页眉-->

3.引入两个css样式

1 <link rel="stylesheet" href="css/common.min.css">
2 <link rel="stylesheet" href="css/okayNav.min.css">

4.引入两个JS样式

1 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
2 <script src="js/jquery.okayNav-min.js"></script>

5.添加一段初始化代码

1 <script type="text/javascript">
2         var navigation = $(‘#nav-main‘).okayNav();
3 </script>

6.完整代码如下:

 1 <html>
 2     <head>
 3     <meta charset="UTF-8">
 4     <title>导航菜单</title>
 5     <!--css样式-->
 6     <link rel="stylesheet" href="css/common.min.css">
 7     <link rel="stylesheet" href="css/okayNav.min.css">
 8     </head>
 9     <body>
10
11         <header id="header">
12         <a class="site-logo" href="#">
13            Study
14         </a>
15
16         <nav role="navigation" id="nav-main" class="okayNav">
17             <ul>
18                 <li><a href="#">主页</a></li>
19                 <li><a href="#">小学</a></li>
20                 <li><a href="#">初中</a></li>
21                 <li><a href="#">高中</a></li>
22                 <li><a href="#">大学</a></li>
23             </ul>
24         </nav>
25         </header>
26      <!-- js样式-->
27     <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
28     <script src="js/jquery.okayNav-min.js"></script>
29     <script type="text/javascript">
30         var navigation = $(‘#nav-main‘).okayNav(); //关键代码
31     </script>
32     </body>
33 </html>

原文地址:https://www.cnblogs.com/lszw/p/11025860.html

时间: 2024-10-30 16:52:21

导航栏、菜单栏的相关文章

JS自适应导航栏,菜单栏

1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href="css/common.min.css"> <link rel="stylesheet" href="css/okayNav.min.css"> 3.引入两个JS样式 <script src="https://code

自适应导航栏,菜单栏

1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 1 2 <link rel="stylesheet" href="css/common.min.css">  //调用外部CSS样式 common.min.css  写在 head 里 <link rel="stylesheet" href="css/okayNav.min.css">  

Android界面编程——导航栏及菜单(六)

Android界面编程--导航栏及菜单 2.7导航栏及菜单 2.7.1  ActionBar ActionBar是Android3.0(API 11)开始增加的新特性,ActionBar出现在活动窗口的顶部,可以显示标题.icon.Actions按钮.可交互View,可实现应用程序级的导航,如图2.7-1所示 图2.7-1 其中 1. App icon: 主要用于展示App的Logo,如果当前界面不是一级界面,还可以展示返回航. 2.View Control: 用于切换不同的视图或者展示非交互信

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材.但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示.并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死.不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现. 实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了. 方法1:利用

【翻译】移动端友好的响应式导航栏教程

以下是译文: 今天我来教大家设计一个色彩绚丽且移动端友好的响应式导航栏.这个导航栏的灵感源自一款叫做"无主之地(Borderlands)"游戏中的一个叫做Maliwan武器生产商商标所采用的颜色集.导航栏会自动根据浏览器窗口的大小调整布局格式:在PC宽度下呈现为一行按钮,在平板宽度下呈现为三行按钮,而在移动端则变成了一个菜单栏按钮连接,点击可以显示和隐藏整个导航栏.为了使这个导航栏做到真正地移动端友好,我们将采用图标字体来作为导航栏图表,这样的话,当界面放大缩小的时候,图标也会自动调整

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

JavaScript+CSS实现经典的树形导航栏

在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于是到处寻找 资料,从Struts的Dojo插件到Dojo的学习,各种看,结果各种不懂.那个悲催啊!!!结果从头再来,苦学CSS和JS, 虽然现在JS水平不咋的,但是还是可以写出一个一般的导航菜单栏了,自己看看还是说的过去,这里拿出来Show一 下,回来自己好用. 首先上最开始的左侧菜单HTML代码

IOS7 适配时导航栏变黑

当适配IOS的布局时遇到问题:导航栏和菜单栏后台会变黑色. self.edgesForExtendedLayout = UIRectEdgeNone; 原因是系统默认这两个控件是半通明的. 解决方案: self.navigationController.navigationBar.translucent = NO; self.tabBarController.tabBar.translucent = NO;