导航

4.2.1 导航条

鼠标经过状态a:hover，当前选中状态li.current。下拉菜单效果，请参考4.3 下拉菜单。

navbar-black 是黑色导航风格，自己使用时候，可以去掉这个类名，定制自己的风格。

在navbar div上追加 navbar-fixed-top 样式，可以将导航条固定在网页顶部。

HTML代码

<header class="navbar-wrapper">
	<div class="navbar navbar-black">
		<div class="container cl">
			<a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui前端框架</a>
			<a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a>
			<span class="logo navbar-slogan f-l mr-10 hidden-xs">简单 &middot; 免费 &middot; 适合中国网站</span>
			<a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
			<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
				<ul class="cl">
					<li class="current"><a href="/">首页</a></li>
					<li><a href="#">核心</a></li>
					<li><a href="#">扩展</a></li>
					<li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">一级导航 <i class="Hui-iconfont">&#xe6d5;</i></a>
						<ul class="dropDown-menu menu radius box-shadow">
							<li><a href="#">二级导航</a></li>
							<li><a href="#">二级导航<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
								<ul class="menu">
									<li><a href="javascript:;">三级菜单<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
										<ul class="menu">
											<li><a href="javascript:;">四级菜单</a></li>
											<li><a href="javascript:;">四级菜单</a></li>
											<li><a href="javascript:;">四级菜单</a></li>
										</ul>
									</li>
									<li><a href="#">三级导航</a></li>
								</ul>
							</li>
							<li><a href="#">二级导航</a></li>
							<li class="disabled"><a href="javascript:;">二级菜单</a></li>
						</ul>
					</li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</nav>
			<nav class="navbar-userbar hidden-xs">
				
			</nav>
		</div>
	</div>
</header>

CSS代码

.navbar-wrapper{ height: 45px}
.navbar{ position:relative; z-index:1030}
.navbar-black{ background-color: #222}
.navbar-fixed-top{ position:fixed; top:0;left: 0; right: 0; z-index:1030}

/*logo*/
.logo{ display:inline-block; text-decoration:none; cursor:pointer}
a.logo:hover{ text-decoration:none}
.navbar .logo{height: 44px;line-height: 44px;margin-right: 10px;float: left}
.navbar-logo,.navbar-logo-m{font-size: 16px}
.navbar-slogan{ font-size:12px; cursor: default}
.navbar .container{ position:relative}
.navbar-userbar{position:absolute;top:0px; right:15px}
.navbar .container .navbar-userbar{ right:0px}

/*导航*/
.nav{ z-index:1}
.nav > ul{ font-size:0; line-height:0}
.nav > ul > li{ position:relative}
.nav > ul > li,.nav > ul > li > a{ display:inline-block; height:44px; line-height:44px;text-align:center;font-size:14px}
.nav > ul > li > a{ padding:0 20px}
.nav > ul > li > a:hover,.nav > ul > li.current > a{background-color:rgba(255,255,255,0.2); text-decoration:none;
	-webkit-transition: background-color 0.3s ease 0s;
	-moz-transition: background-color 0.3s ease 0s;
	-o-transition: background-color 0.3s ease 0s;
	-ms-transition: background-color 0.3s ease 0s;
	transition: background-color 0.3s ease 0s
}
@media (max-width: 767px) {
	.logo{ margin-right: 0}
	.navbar-nav{display: none}
	.navbar-nav > ul > li{ width: 100%; text-align: left}
	.navbar-nav > ul > li > a{display:block;padding:0 15px; text-align: left}
	.nav-collapse ul,.nav-collapse li {width: 100%;display: block}
	.js .nav-collapse {position: absolute;display: block;float:none; clear:both;max-height: 0;clip: rect(0 0 0 0);margin-left: -15px; margin-right: -15px;overflow: hidden;zoom: 1;
		-webkt-transition:max-height 284ms ease 0s;
		-moz-transition:max-height 284ms ease 0s;
		-o-transition:max-height 284ms ease 0s;
		-ms-transition:max-height 284ms ease 0s;
		transition:max-height 284ms ease 0s}
	.js-nav-active .nav-collapse.closed {max-height: none}
	.nav-collapse.opened {max-height: 9999px}
}

/*导航条风格-黑色*/
.navbar-black{background-color:#222;border-bottom:#080808 1px solid;-moz-box-shadow: 0 0 4px #333333;-webkit-box-shadow: 0 0 4px #333333;box-shadow: 0 0 4px #333333}
.navbar-black .logo{ color: #fff }
.navbar-black .navbar-logo-m{color: #eee}
.navbar-black .navbar-nav > ul > li,
.navbar-black .navbar-nav > ul > li > a{ color:#fff}
.navbar-black .navbar-nav > ul > li > a:hover,
.navbar-black .navbar-nav > ul > li.current > a{color:#fff}
.navbar-black .navbar-userbar{ color: #fff}
@media (max-width: 767px) {
.navbar-black .navbar-nav > ul > li{border-bottom: solid 1px #222}
.navbar-black .navbar-nav > ul > li > a:hover,
.navbar-black .navbar-nav > ul > li.current > a{ background: #777}
}

/*面包导航*/
.nav-toggle,a.nav-toggle{position:absolute; top:0px; right:15px; font-size: 20px; color:#999; padding:6px 11px;background-color:rgba(0,0,0,0.5);color:#fff;-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none}
.nav-toggle:hover,a.nav-toggle:hover{ text-decoration: none; color:#fff}

4.2.2 面包屑导航

HTML代码

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> <a class="maincolor" href="/">首页</a><span class="c-666 en">&gt;</span>组件<span class="c-666 en">&gt;</span><span class="c-666">菜单</span></nav>

CSS代码

.breadcrumb{border-bottom: 1px solid #E5E5E5;line-height: 39px; height:39px}
.breadcrumb span{padding:0 5px}

4.2.3 翻页导航

使用layPage插件。layPage是一款多功能的国产js分页组件，即适用于异步分页，又可用于传统的整页刷新跳页，还支持信息流加载，并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库，直接拿来用即可。（此插件版权归：贤心所有。请在使用过程中不要删除版权注释。）

jump函数返回e是一个object，e.curr即当前页，通过它去向服务端请求相关数据。

更多技术问题请：进入作者官网

引入laypage.js

<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>

调用代码：

$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义
	laypage({
		cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="page1">&lt;/div>
        pages: res.pages, //通过后台拿到的总页数
        curr: 6, //初始化当前页
        jump: function(e){ //触发分页后的回调
            $.getJSON('test/demo1.json', {curr: e.curr}, function(res){
                e.pages = e.last = res.pages; //重新获取总页数，一般不用写
                //渲染
                var view = document.getElementById('view1'); //你也可以直接使用jquery
                var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示
                view.innerHTML = res.content + demoContent; 
            });
        }
    });
});

4.2.4 顶部导航

您好，欢迎来到Hui！
[ 登录 ]|[ 注册 ]|收藏本站|设为首页

HTML代码

<div class="topnav">
  <div class="wp cl">
  <div class="l">您好，欢迎来到Hui！</div>
  <div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏本站" href="javascript:;" onClick="addFavoritepage('H-ui前端框架','http://www.h-ui.net/');">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div>
  </div>
</div>

CSS代码

.topnav{height:30px;line-height:30px;background:url(../images/bg_topnav.gif) repeat-x 0 0;border-bottom:1px solid #EBEBEB; font-size:12px}
.topbar{background-color: #ECECEC;border-bottom:1px solid #ddd}
.topbar a{ margin-right:5px}
.r_nav{ display:inline-block; color:#999}

JS代码

/*添加收藏*/
function addFavorite(name,site){
	try{window.external.addFavorite(site,name)}
	catch(e){
		try{window.sidebar.addPanel(name,site,"")}
			catch(e){alert("加入收藏失败，请使用Ctrl+D进行添加")}
	}
}
/*设为首页*/
function setHome(obj){
  try{obj.style.behavior="url(#default#homepage)";obj.setHomePage(webSite)}
  catch(e){if(window.netscape){
  try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")}
  catch(e){alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入\"about:config\"并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。")}
  var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
  prefs.setCharPref('browser.startup.homepage',url)}}
}

4.2.5 导向

第一步
第一步 第二步
第一步 第二步第三步
第一步 第二步 第三步 第四步
第一步 第二步 第三步 第四步 第五步

HTML代码

<div class="four steps">
  <span class="step">第一步</span>
  <span class="active step">第二步</span>
  <span class="disabled step">第三步</span>
  <span class="disabled step">第四步</span>
</div>

CSS代码

.steps,.step{display:inline-block;position:relative;padding:1em 2em 1em 3em;vertical-align:top;background-color:#FFF;color:#888;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.step:after,.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.45em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}
.step,.steps .step,.steps .step:after{-webkit-transition:opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,box-shadow .1s ease}
.steps{cursor:pointer;display:inline-block;font-size:0;box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-radius:.3125rem}
.steps .step:first-child{padding-left:1.35em;border-radius:.3125em 0 0 .3125em}
.steps .step:last-child{border-radius:0 .3125em .3125em 0}
.steps .step:only-child{border-radius:.3125em}
.steps .step:last-child{margin-right:0}
.steps .step:last-child:after{display:none}
.step:hover,.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}
.steps .step.hover:after,.steps .step:hover:after,.step:hover,.step.hover::after{border-left-color:#F7F7F7}
.steps .step.down,.steps .step:active,.step.down,.step:active{background-color:#F0F0F0}
.steps .step.down:after,.steps .step:active:after,.steps.down::after,.steps:active::after{border-left-color:#F0F0F0}
.steps .step.active,.active.step{cursor:auto;background-color:#428BCA;color:#FFF;font-weight:700}.steps .step.active:after,.active.steps:after{border-left-color:#428BCA}
.steps .disabled.step,.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}
.disabled.step:after{border:0;background-color:#FFF;top:.42em;right:-1em;width:2.15em;height:2.15em;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset}
.attached.steps{margin:0;border-radius:.3125em .3125em 0 0}
.attached.steps .step:first-child{border-radius:.3125em 0 0}
.attached.steps .step:last-child{border-radius:0 .3125em 0 0}
.bottom.attached.steps{margin-top:-1px;border-radius:0 0 .3125em .3125em}
.bottom.attached.steps .step:first-child{border-radius:0 0 0 .3125em}
.bottom.attached.steps .step:last-child{border-radius:0 0 .3125em}

/*向导数量*/
.one.steps,.two.steps,.three.steps,.four.steps,.five.steps,.six.steps,.seven.steps,.eight.steps{display:block}
.one.steps>.step{width:100%}
.two.steps>.step{width:50%}
.three.steps>.step{width:33.333%}
.four.steps>.step{width:25%}
.five.steps>.step{width:20%}
.six.steps>.step{width:16.666%}
.seven.steps>.step{width:14.285%}
.eight.steps>.step{width:12.5%}

/*向导尺寸*/
.small.step,.small.steps .step{font-size:.8rem}/*小*/
.step,.steps .step{font-size:1rem}/*默认*/
.large.step,.large.steps .step{font-size:1.25rem}/*大*/

Copyright ©2013-2022 H-ui.net All Rights Reserved.
豫ICP备19019279号-1
H-ui只是一个纯web前端的程序，没有后台和数据库，也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有，造成的任何损失、不良影响，H-ui均不承担任何法律责任。
未经允许，禁止转载、抄袭、镜像
用心做站，做不一样的站