用到了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>
相关推荐
在网页设计中,导航条是页面布局的重要组成部分,它为用户提供了一个直观的界面来浏览网站的不同部分。"导航条_水平2"这个主题主要聚焦于水平布局的导航条设计,这是最常见的网页导航形式,适用于大部分网站,特别是...
在网页设计中,导航条是页面布局的重要组成部分,它引导用户轻松访问网站的不同部分。"FLASH导航条快速制作"是一个针对新手的教程,旨在帮助用户快速掌握如何利用Adobe Flash创建吸引人的动态导航条。Flash因其丰富...
在C#编程环境中,开发一个简单的侧选栏(也称为导航条)对于构建用户界面(UI)至关重要。这种导航条通常用于提供应用内的导航功能,让用户可以轻松地在不同的功能或视图之间切换。在C/S(客户端/服务器)架构中,...
在网页设计中,导航条是不可或缺的元素,它帮助用户快速定位并访问网站的不同部分。本文将深入探讨如何使用JavaScript实现一个二级横向导航条,并分析其功能特点。 首先,"JS做的二级横向导航条"是一种交互式的网页...
在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。本资源集合了几个使用CSS(层叠样式表)和HTML(超文本标记语言)以及JavaScript编写的经典导航条实例,这些都是个人精心收集的...
在移动应用和网页设计中,底部导航条(Bottom Navigation Bar)是常见的用户界面元素,它为用户提供了一种方便快捷的方式,来访问网站或应用的主要功能。这个“手机端自适应底部导航条,带小图标”的设计,是针对...
Apple样式导航条是一种深受设计师和开发者喜爱的界面元素,它源于苹果公司(Apple)的产品设计,尤其是iOS和macOS系统中的界面设计。这种导航条以其简洁、清晰和易用性著称,通常包括一个或多个可点击的标签,用于在...
在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。本文将深入探讨如何使用HTML和CSS构建动态导航条,特别是二级和三级导航条,以及一些特殊的样式和效果。 首先,"div+css布局...
在网页设计中,导航条是不可或缺的部分,它帮助用户在网站间轻松地浏览和定位。JavaScript(简称JS)被广泛用于实现动态、交互式的导航条效果,为用户提供更丰富的用户体验。以下将详细介绍标题和描述中提到的几种JS...
在网页设计中,导航条是不可或缺的部分,它帮助用户轻松浏览网站的不同部分。"超强的JavaScript导航条"是一个专门针对这个需求的实现,旨在提供一种高效、功能丰富的导航解决方案。 导航条在网站设计中的作用主要...
网页导航条是网站设计中的重要元素,它帮助用户在页面之间快速切换,提供良好的用户体验。本资源提供了动感的网页导航条的源代码,适合开发者参考和使用,以提升网站的互动性和吸引力。以下是对相关知识点的详细说明...
标题中的“jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705”指的是一个基于jQuery技术的网页导航条设计实例。这个导航条特别之处在于它结合了Flash动画效果,使得用户在鼠标滑过时能体验到动态的视觉效果,...
下拉式导航条是网页设计中常见的交互元素,它能够高效地组织大量链接,节省页面空间,提升用户体验。本文将详细讲解如何使用JavaScript和CSS来创建一个这样的功能。 首先,我们要明白JavaScript和CSS在其中各自扮演...
"JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...
在网页设计中,导航条是不可或缺的元素,它帮助用户在网站中轻松地浏览和定位信息。"经典导航条素材大全"是一个集合了多种样式、设计和功能的导航条资源库,旨在为网页设计师提供灵感和实用素材。下面将详细探讨经典...
在iOS应用开发中,"仿苹果导航条"通常指的是创建一个与Apple官方应用程序中的导航栏相似的自定义组件。苹果的导航条以其清晰的设计和易用性著称,因此许多开发者希望在自己的应用中实现类似的功能。这个话题涉及到的...
在Vue.js中开发移动端底部导航条功能是一项常见的任务,它能提供用户友好的界面和流畅的导航体验。本文将深入探讨如何使用Vue实现这一功能,包括组件化设计、路由链接和样式布局。 首先,我们来看一下`app.vue`中的...
《Flash导航条制作工具详解与应用》 在网页设计领域,动态导航条是提升用户体验、增强网站视觉吸引力的重要元素。本文将围绕“Flash导航条制作工具”这一主题,深入探讨其功能、使用方法以及相关文件的解读,帮助你...
在IT行业中,动态导航条是网站设计中一个重要的组成部分,它为用户提供了一种直观且交互式的浏览体验。本文将深入探讨“Flash动态导航条代码”的相关知识点,包括其原理、制作过程以及如何根据需求进行自定义修改。 ...
在网页设计中,导航条(Navigation Bar)是一个至关重要的元素,它帮助用户在网站的不同页面之间轻松跳转,提供良好的用户体验。本教程将探讨如何创建一个简易的导航条,你可以通过查看提供的网页源代码来进一步了解...