`
cocoding
  • 浏览: 37739 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

导航条

 
阅读更多

      用到了boostrap导航条组件,但并不使用其默认的样式,便于修改。

响应式导航条效果:

      

 代码:

       

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .main-navigation{
            text-align: center;
            background: #ffffff;
            border-top: 1px solid #ebebeb;
            border-bottom: 3px solid #e1e1e1;
            margin-bottom: 35px;
        }
        .main-navigation .menu{
            margin: 0;
            padding: 0;
        }
        .menu li{
            list-style: none;
            display: inline-block;

        }
        .menu li a{
            display: block;
            text-decoration: none;
            outline:none;
            color: #505050;
            line-height: 4em;
            padding: 0 21px;
        }
        .menu .active{
            border-bottom: 3px solid #e67e22;
            margin-bottom: -2px;
        }
        .menu li a:hover{
            color:#e67e22;
        }
        .logo img{
            width: 200px;
            height: 56px;
            margin-right: -60px;
            margin-top: -10px;
        }
        .navbar-header span{
            font-size: 1.5em;
            line-height: 56px;
            height: 56px;
        }
        #mynav{
            float:left;
        }
    </style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    //jQuery改变鼠标样式
    $(function(){
        $('.menu li a').hover(function(){
                    $(this).addClass('active');
                },function(){
                    $(this).removeClass('active');
                }
        );
    });
</script>
    <nav class="main-navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="navbar-header">
                        <a href="#" class="logo">
                            <img src="img/logo.jpg">
                        </a>
                        <span>XXXX</span>

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="mynav">
                        <ul class="menu">
                            <li class="active"><a href="#" > 首页</a></li>
                            <li><a href="#"> 菜单1</a></li>
                            <li><a href="#"> 菜单2</a></li>
                            <li><a href="#"> 菜单3</a></li>
                            <li><a href="#"> 菜单4</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

</body>
</html>

 

  • 大小: 7.4 KB
分享到:
评论

相关推荐

    导航条_水平2

    在网页设计中,导航条是页面布局的重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。"导航条_水平2"这个主题主要聚焦于水平布局的导航条设计,这是最常见的网页导航形式,适用于大部分网站,特别是...

    FLASH导航条快速制作

    在网页设计中,导航条是页面布局的重要组成部分,它引导用户轻松访问网站的不同部分。"FLASH导航条快速制作"是一个针对新手的教程,旨在帮助用户快速掌握如何利用Adobe Flash创建吸引人的动态导航条。Flash因其丰富...

    C# 简单导航条

    在C#编程环境中,开发一个简单的侧选栏(也称为导航条)对于构建用户界面(UI)至关重要。这种导航条通常用于提供应用内的导航功能,让用户可以轻松地在不同的功能或视图之间切换。在C/S(客户端/服务器)架构中,...

    JS做的二级横向导航条

    在网页设计中,导航条是不可或缺的元素,它帮助用户快速定位并访问网站的不同部分。本文将深入探讨如何使用JavaScript实现一个二级横向导航条,并分析其功能特点。 首先,"JS做的二级横向导航条"是一种交互式的网页...

    几个经典的导航条,css+div+js写的,个人收集

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。本资源集合了几个使用CSS(层叠样式表)和HTML(超文本标记语言)以及JavaScript编写的经典导航条实例,这些都是个人精心收集的...

    手机端自适应底部导航条,带小图标的

    在移动应用和网页设计中,底部导航条(Bottom Navigation Bar)是常见的用户界面元素,它为用户提供了一种方便快捷的方式,来访问网站或应用的主要功能。这个“手机端自适应底部导航条,带小图标”的设计,是针对...

    Apple样式导航条

    Apple样式导航条是一种深受设计师和开发者喜爱的界面元素,它源于苹果公司(Apple)的产品设计,尤其是iOS和macOS系统中的界面设计。这种导航条以其简洁、清晰和易用性著称,通常包括一个或多个可点击的标签,用于在...

    各类动态导航条、二级导航条

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。本文将深入探讨如何使用HTML和CSS构建动态导航条,特别是二级和三级导航条,以及一些特殊的样式和效果。 首先,"div+css布局...

    js导航条写的几种导航条

    在网页设计中,导航条是不可或缺的部分,它帮助用户在网站间轻松地浏览和定位。JavaScript(简称JS)被广泛用于实现动态、交互式的导航条效果,为用户提供更丰富的用户体验。以下将详细介绍标题和描述中提到的几种JS...

    超强的javascript导航条

    在网页设计中,导航条是不可或缺的部分,它帮助用户轻松浏览网站的不同部分。"超强的JavaScript导航条"是一个专门针对这个需求的实现,旨在提供一种高效、功能丰富的导航解决方案。 导航条在网站设计中的作用主要...

    网页导航条源码动感的网页导航条,有源代码

    网页导航条是网站设计中的重要元素,它帮助用户在页面之间快速切换,提供良好的用户体验。本资源提供了动感的网页导航条的源代码,适合开发者参考和使用,以提升网站的互动性和吸引力。以下是对相关知识点的详细说明...

    jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705

    标题中的“jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705”指的是一个基于jQuery技术的网页导航条设计实例。这个导航条特别之处在于它结合了Flash动画效果,使得用户在鼠标滑过时能体验到动态的视觉效果,...

    基于js+css设计的下拉式导航条

    下拉式导航条是网页设计中常见的交互元素,它能够高效地组织大量链接,节省页面空间,提升用户体验。本文将详细讲解如何使用JavaScript和CSS来创建一个这样的功能。 首先,我们要明白JavaScript和CSS在其中各自扮演...

    JQ滑动变色菜单_导航条变色滑动显示

    "JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...

    经典导航条素材大全下

    在网页设计中,导航条是不可或缺的元素,它帮助用户在网站中轻松地浏览和定位信息。"经典导航条素材大全"是一个集合了多种样式、设计和功能的导航条资源库,旨在为网页设计师提供灵感和实用素材。下面将详细探讨经典...

    仿苹果导航条2

    在iOS应用开发中,"仿苹果导航条"通常指的是创建一个与Apple官方应用程序中的导航栏相似的自定义组件。苹果的导航条以其清晰的设计和易用性著称,因此许多开发者希望在自己的应用中实现类似的功能。这个话题涉及到的...

    vue开发移动端底部导航条功能

    在Vue.js中开发移动端底部导航条功能是一项常见的任务,它能提供用户友好的界面和流畅的导航体验。本文将深入探讨如何使用Vue实现这一功能,包括组件化设计、路由链接和样式布局。 首先,我们来看一下`app.vue`中的...

    Flash导航条制作工具

    《Flash导航条制作工具详解与应用》 在网页设计领域,动态导航条是提升用户体验、增强网站视觉吸引力的重要元素。本文将围绕“Flash导航条制作工具”这一主题,深入探讨其功能、使用方法以及相关文件的解读,帮助你...

    flash 动态导航条代码

    在IT行业中,动态导航条是网站设计中一个重要的组成部分,它为用户提供了一种直观且交互式的浏览体验。本文将深入探讨“Flash动态导航条代码”的相关知识点,包括其原理、制作过程以及如何根据需求进行自定义修改。 ...

    简易导航条制作

    在网页设计中,导航条(Navigation Bar)是一个至关重要的元素,它帮助用户在网站的不同页面之间轻松跳转,提供良好的用户体验。本教程将探讨如何创建一个简易的导航条,你可以通过查看提供的网页源代码来进一步了解...

Global site tag (gtag.js) - Google Analytics