自适应导航栏,菜单栏

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">  //调用外部CSS样式 okayNav.min.css  写在 head 里

3.引入两个JS样式


1

<script src="https://code.jquery.com/jquery-2.2.3.min.js">  //jquery插件脚本 https://code.jquery.com/jquery-2.2.3.min.js这个是js文件 这段写在了 body 里

</script>    //</script 是 javascript结束标签 一定要写>

1

<script src="js/jquery.okayNav-min.js">    写在了 body 里

</script>        //</script 是 javascript结束标签 一定要写>   

4.添加导航栏主体代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<header id="header">

<a class="site-logo" href="#">

   Logo

</a>

<nav role="navigation" id="nav-main" class="okayNav">  //这里的 nav 用于表示导航

    <ul>

        <li><a href="#">主页</a></li>  //"#"在这里是不起作用的 占位符

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

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

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

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

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

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

    </ul>

</nav>  //导航的 结束标签

</header>

5.添加一段初始化代码


1

2

3

<script type="text/javascript">

        var navigation = $(‘#nav-main‘).okayNav();

</script>

完整代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<html>

    <head>

    <meta charset="UTF-8">

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

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

    </head>

    <body>

    

        <header id="header">

        <a class="site-logo" href="#">

           Logo

        </a>

        

        <nav role="navigation" id="nav-main" class="okayNav">

            <ul>

                <li><a href="#">主页</a></li>

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

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

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

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

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

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

            </ul>

        </nav>

        </header>

    

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

    <script src="js/jquery.okayNav-min.js"></script>

    <script type="text/javascript">

        var navigation = $(‘#nav-main‘).okayNav();

    </script>

    </body>

</html>

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

时间： 2024-11-10 13:48:17

自适应导航栏,菜单栏的相关文章

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.添加导航栏主体代码 1 <header id="header"> 2 <a class="site-logo" href="#"> 3 Logo 4 </a> 5 6 <nav role="navigation" id="nav-main" class="okay

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果 分析 上端导航栏可以放置多个分类,可滑动 点击导航栏最右端按钮可以查看所有分类,同时背景模糊 内容部分右拉跳转到另外的分类 点击分类时导航栏的滑动部分自动滑动到合适的位置 我的实现 代码展示: js /** * categoryView.js - 分类页面 */ var fakeData = require('../../common/fakeData.js') Page( { data: { categories: ['全部'], currentTab: 0, scro

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

修改LigerUI的导航栏，改为Tab标签模式

LigerUI导航栏本身是没有tab标签模式的,但是实际上,很多时候标签能能更好的展示业务,将导航的内容按照类目进行划分,避免一个里面太多的情况. 下面是我改造后的效果图,如下: ligerui是一个不错的免费开源ui框架,功能还是很强大的,但是有些地方也做的不够好,比如表单的自适应布局,树,布局等等,但是相信会越来越好.这里给出我改造后代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

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

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

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

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

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

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