常见导航菜单实现方式

导航条下拉

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>导航条下拉-demo</title><script src="../node_modules/jquery/dist/jquery.min.js"></script><style>* {margin: 0;padding: 0;}#nav {background-color: #eeeeee;height: 40px;width: 600px;margin: auto;text-align: center;}ul {list-style: none;}ul li {position: relative;float: left;line-height: 40px;text-align: center;}a {text-decoration: none;color: black;display: block;padding: 0 10px;}a:hover {color: white;background-color: gray;}ul li ul li {float: none;background-color: #eeeeee;margin-top: 2px;}ul li ul {position: absolute;left: o;top: 40px;display: none;}</style></head><body><div id="nav"><ul><li><a href=""> 首&nbsp;页 </a></li><li class="navmenu"><a href="">课程大厅</a><ul><li><a href="">JavaScript</a></li><li><a href="">JQuery</a></li></ul></li><li class="navmenu"><a href="">学习中心</a><ul><li><a href="">JavaScript</a></li><li><a href="">JQuery</a></li><li><a href="">JavaScript</a></li><li><a href="">JQuery</a></li></ul></li><li><a href="">经典案例</a></li><li><a href="">关于我们</a></li></ul></div><script type="text/javascript">$(function() {$('.navmenu').mouseover(function() {$(this).children('ul').show()})$('.navmenu').mouseout(function() {$(this).children('ul').hide()})})</script></body>
</html>复制代码

顶部导航固定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单固定吸顶</title>
<style>
body {margin:0;}
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: fixed;top: 0;width: 100%;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}li a:hover:not(.active) {background-color: #111;
}.active {background-color: #4CAF50;
}
</style>
</head>
<body><ul><li><a class="active" href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li>
</ul><div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div></body>
</html>
复制代码

常规顶部导航 + 固定侧边栏


<html><head><meta charset="utf-8" /><title>常规顶部导航 + 固定侧边栏</title><style>@charset "utf-8";body,div,ul,li {margin: 0;padding: 0;font-style: normal;font: 12px/22px '\5B8B\4F53', Arial, Helvetica, sans-serif;}ol,ul,li {list-style: none;}img {border: 0;vertical-align: middle;}body {color: #000000;background: #fff;text-align: center;}.clear {clear: both;height: 1px;width: 100%;overflow: hidden;margin-top: -1px;}a {color: #000000;text-decoration: none;}a:hover {color: #ba2636;}.red,.red a {color: #f00;}.lan,.lan a {color: #1e51a2;}.pd5 {padding-top: 5px;}.dis {display: block;}.undis {display: none;}ul#nav {width: 100%;height: 60px;background: #00a2ca;margin: 0 auto;position: fixed;}ul#nav li {display: inline;height: 60px;}ul#nav li a {display: inline-block;padding: 0 20px;height: 60px;line-height: 60px;color: #fff;font-family: '\5FAE\8F6F\96C5\9ED1';font-size: 16px;}ul#nav li a:hover {background: #0095bb;}ul#sider{list-style-type: none;margin: 0;margin-top: 60px;padding: 0;width: 10%;background-color: #f1f1f1;position: fixed;height: 100%;overflow: auto;}li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;
}li a.active {background-color: rgb(29, 39, 30);color: white;
}li a:hover:not(.active) {background-color: #555;color: white;
}</style></head><body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">HTML教程</a></li><li><a href="#">CSS基础</a></li><li><a href="#">CSS开发工具</a></li><li><a href="#">CSS特效</a></li><li><a href="#">CSS问题</a></li></ul><ul id="sider"><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li></ul><div style="margin-left:25%;padding:1px 16px;height:100%;"><h2>Fixed Full-height Side Nav</h2><h3>Try to scroll this area, and see how the sidenav sticks to the page</h3></div></body>
</html>复制代码

常见导航菜单实现方式相关推荐

导航菜单设计五步法——B端设计指南
www.pmcaff.com 本文为PMCAFF作者 CE大人于社区发布导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结前言在任意一 ...
网页导航菜单制作——快，很快，非常快
网页导航菜单已成为网页不可或缺的一部分,或许我们误以为它与网页是一个整体,而忽视了他的存在.不可否认,网页导航菜单与网页有密不可分的联系.但是,网页导航菜单也是需要独立编写的,特别是flash网页导航 ...
web html做菜单,Web元素设计之导航菜单
1. 横向导航菜单导航菜单实际上相当于一个列表,自然地,我们可以选择HTML中的列表元素ul来进行实现: HTML ↓: 首页探索观察解密关于 ul本身是一个块级元素,其中包含的列表项li同 ...
手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
2015年主流的页面导航菜单设计
在移动版应用网站中,用汉堡菜单图标已经成为主流的一种很常见的导航设计模式了,由于它不会干扰用户使用的任务过程,只要在需要的时候点击图标来访问菜单,很多可以让人眼花缭乱的元素都可以被隐藏在汉堡包菜单中, ...
关于pps.tv首页导航菜单样式的研究疑问
问题是这样子的,今天在看电影时偶然注意到pps.tv的首页导航菜单,注意他的"PPS搜索"是没有右边框的于是好奇心起,想看看它的菜单竖条是怎么实现的,是不是与网上常见实现方式相同 ...
7种优秀的导航菜单设计总结
导航是应用程序界面中最常见的模块之一,在链接应用程序中起着每个页面的作用. 不同的设计需求和业务目标决定了导航的设计因品而异,移动设备的尺寸远小于计算机.因此,在设计移动终端导航时,应考虑更全面,以确 ...
使用Axure RP 8制作两种导航菜单-下拉导航
日常在绘制web端原型时,往往会涉及到导航栏的制作,文章主要记录两种常见导航栏的绘制方法. 首先我们看一下两种导航方式,一种是点击一级菜单,出现下拉的二级菜单:另一种是鼠标移入时显示二级菜单的悬浮框, ...
jQuery实例——仿京东仿淘宝列表导航菜单
以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...

常见导航菜单实现方式

导航条下拉

顶部导航固定

常规顶部导航 + 固定侧边栏

常见导航菜单实现方式相关推荐

最新文章

热门文章