导航
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
4.2.1 导航条
鼠标经过状态a:hover,当前选中状态li.current。下拉菜单效果,请参考4.3 下拉菜单。
hui-navbar-black 是黑色导航风格,自己使用时候,可以去掉这个类名,定制自己的风格。
在navbar div上追加 navbar-fixed-top 样式,可以将导航条固定在网页顶部。
HTML
SCSS
CSS
<header class="hui-nav-wrapper"> <div class="hui-nav-bar"> <div class="hui-layout-content clearfix"> <a class="hui-logo hidden-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui前端框架</a> <a class="hui-logo visible-xs" href="http://www.h-ui.net/aboutHui.shtml">H-ui</a> <span class="hui-logo hui-slogan hidden-xs">简单 · 免费 · 适合中国网站</span> <a aria-hidden="false" class="hui-nav-toggle hui-iconfont visible-xs JS-nav-toggle" href="javascript:;"></a> <nav class="hui-nav hui-nav-collapse" style="float: left; display: flex; flex: 1 1 0%;"> <ul class="clearfix"> <li class="current"> <a href="http://www.h-ui.net/" target="_blank">首页</a> </li> <li> <a href="http://www.h-ui.net/Hui-overview.shtml" target="_blank">核心</a> </li> <li> <a href="http://www.h-ui.net/lib/jQuery.cookie.js.shtml" target="_blank">脚本</a> </li> <li class="hui-dropdown hui-dropdown-hover"> <a href="javascript:;" class="hui-dropdown-link">工具 <i class="hui-iconfont"></i></a> <ul class="hui-menu hui-dropdown-menu radius box-shadow"> <li class="hui-menu-item"> <a href="http://www.h-ui.net/bug.shtml" target="_blank">Bug兼容性汇总</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/websafecolors.shtml" target="_blank">web安全色</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/hui-3.7-hui-iconfont.shtml" target="_blank">hui-iconfont</a> </li> <li class="hui-menu-item"> <a href="javascript:;">web工具箱<i class="arrow hui-iconfont"></i></a> <ul class="hui-menu"> <li class="hui-menu-item"> <a href="http://www.h-ui.net/tools/jsformat.shtml" target="_blank">JS/HTML格式化工具</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/tools/HTMLtoJS.shtml" target="_blank">HTML/JS转换工具</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/tools/cssformat.shtml" target="_blank">CSS代码格式化工具</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/tools/daxiaoxie.shtml" target="_blank">字母大小写转换工具</a> </li> <li class="hui-menu-item"> <a href="http://www.h-ui.net/tools/fantizhuanhuan.shtml" target="_blank">繁体字、火星文转换</a> </li> <li class="hui-menu-item"> <a href="javascript:;">三级菜单<i class="arrow hui-iconfont"></i></a> <ul class="hui-menu"> <li class="hui-menu-item"> <a href="javascript:;">四级菜单</a> </li> <li class="hui-menu-item"> <a href="javascript:;">四级菜单</a> </li> <li class="hui-menu-item"> <a href="javascript:;">四级菜单</a> </li> </ul> </li> <li class="hui-menu-item"> <a href="#">三级导航</a> </li> </ul> </li> <li class="hui-menu-item"> <a href="#">二级导航</a> </li> <li class="hui-menu-item disabled"> <a href="javascript:;">二级菜单</a> </li> </ul> </li> <li> <a href="http://h-ui.net/aboutHui.shtml" target="_blank">联系我们</a> </li> </ul> </nav> <nav class="hui-nav hidden-xs" style="float: right"> <ul class="clearfix"> <li> <a href="#" target="_blank">登录</a> </li> <li> <a href="#" target="_blank">注册</a> </li> </ul> </nav> </div> </div> </header>
/*logo*/ .hui-logo { display: inline-block; text-decoration: none; cursor: pointer; background-repeat: no-repeat; background-position: left center; background-size: auto 100%; &:hover { text-decoration: none; } } /*导航条*/ .hui-nav-wrapper { height: 45px; .hui-nav-bar { position: relative; z-index: 1030; background-color: #fff; .hui-layout-content { position: relative; .hui-nav-userbar { right: 0px; } } &.hui-nav-black { background-color: #222; } &.hui-nav-fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 1px 4px rgb(0 21 41 / 8%); } .hui-logo { height: 44px; line-height: 44px; margin-right: 10px; float: left; font-size: 16px; } .hui-slogan { font-size: 12px; cursor: default; } } } /*导航*/ .hui-nav { z-index: 1; > ul { font-size: 0; line-height: 0; >li, >li > a { line-height: 44px; font-size: 14px; } >li { position: relative; float: left; text-align: center; >a { display: inline-block; text-align: center; padding: 0 10px; } >a:hover, &.current>a { background-color: rgba(255, 255, 255, 0.2); text-decoration: none; @include transition(background-color 0.3s ease 0s); } } } } @media (max-width: 767px) { .hui-logo { margin-right: 0 } .hui-nav-wrapper { height: 45px!important; .hui-nav-bar { .hui-logo { height: 44px!important; line-height: 44px!important; } .hui-nav { display: none !important; float: none!important; > ul > li { width: 100%; text-align: left; border-bottom: solid 1px #eee; >a { display: block; padding: 0 15px; text-align: left; } &.hui-dropdown.open>.hui-dropdown-menu { display: none; } &.hui-dropdown>.hui-dropdown-link>.hui-iconfont { display: none; } } > ul > li, > ul > li >a { height: 44px!important; line-height: 44px!important; } &.hui-nav-collapse { ul, ul > li { width: 100%; display: block; } } } } } .js-nav-active .hui-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; @include transition(max-height 284ms ease 0s); &.closed { max-height: none; } } .hui-nav-collapse.opened { max-height: 9999px; } } /*导航条风格-黑色*/ .hui-nav-black { background-color: #222; border-bottom: #080808 1px solid; @include boxShadow(0 0 4px #333333); .hui-logo { color: #fff; color: #eee; } .navbar-userbar { color: #fff; } .hui-nav{ > ul > li, > ul > li > a{ color: #fff; } > ul > li > a:hover, > ul > li.current > a { color: #fff; } } } @media (max-width: 767px) { .hui-nav-black { .hui-nav > ul >li { border-bottom: solid 1px #222; > a:hover, &.current>a { background: #777; } } } } /*面包导航*/ .hui-nav-toggle, a.hui-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; &:hover { text-decoration: none; color: #fff } } @media (max-width: 767px) { .mainnav>ul>li { font-size: 1.125em } } @media (max-width: 480px) { .mainnav>ul>li { text-align: center; width: 20%; >a { padding: 0; padding: 0; display: block } } }
/*logo*/ .hui-logo { display: inline-block; text-decoration: none; cursor: pointer; background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } .hui-logo:hover { text-decoration: none; } /*导航条*/ .hui-nav-wrapper { height: 45px; } .hui-nav-wrapper .hui-nav-bar { position: relative; z-index: 1030; background-color: #fff; } .hui-nav-wrapper .hui-nav-bar .hui-layout-content { position: relative; } .hui-nav-wrapper .hui-nav-bar .hui-layout-content .hui-nav-userbar { right: 0px; } .hui-nav-wrapper .hui-nav-bar.hui-nav-black { background-color: #222; } .hui-nav-wrapper .hui-nav-bar.hui-nav-fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); } .hui-nav-wrapper .hui-nav-bar .hui-logo { height: 44px; line-height: 44px; margin-right: 10px; float: left; font-size: 16px; } .hui-nav-wrapper .hui-nav-bar .hui-slogan { font-size: 12px; cursor: default; } /*导航*/ .hui-nav { z-index: 1; } .hui-nav > ul { font-size: 0; line-height: 0; } .hui-nav > ul > li, .hui-nav > ul > li > a { line-height: 44px; font-size: 14px; } .hui-nav > ul > li { position: relative; float: left; text-align: center; } .hui-nav > ul > li > a { display: inline-block; text-align: center; padding: 0 10px; } .hui-nav > ul > li > a:hover, .hui-nav > ul > li.current > a { background-color: rgba(255, 255, 255, 0.2); text-decoration: none; transition: background-color 0.3s ease 0s; } @media (max-width: 767px) { .hui-logo { margin-right: 0; } .hui-nav-wrapper { height: 45px !important; } .hui-nav-wrapper .hui-nav-bar .hui-logo { height: 44px !important; line-height: 44px !important; } .hui-nav-wrapper .hui-nav-bar .hui-nav { display: none !important; float: none !important; } .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li { width: 100%; text-align: left; border-bottom: solid 1px #eee; } .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a { display: block; padding: 0 15px; text-align: left; } .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown.open > .hui-dropdown-menu { display: none; } .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown > .hui-dropdown-link > .hui-iconfont { display: none; } .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li, .hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a { height: 44px !important; line-height: 44px !important; } .hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul, .hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul > li { width: 100%; display: block; } .js-nav-active .hui-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; transition: max-height 284ms ease 0s; } .js-nav-active .hui-nav-collapse.closed { max-height: none; } .hui-nav-collapse.opened { max-height: 9999px; } } /*导航条风格-黑色*/ .hui-nav-black { background-color: #222; border-bottom: #080808 1px solid; box-shadow: 0 0 4px #333333; } .hui-nav-black .hui-logo { color: #fff; color: #eee; } .hui-nav-black .navbar-userbar { color: #fff; } .hui-nav-black .hui-nav > ul > li, .hui-nav-black .hui-nav > ul > li > a { color: #fff; } .hui-nav-black .hui-nav > ul > li > a:hover, .hui-nav-black .hui-nav > ul > li.current > a { color: #fff; } @media (max-width: 767px) { .hui-nav-black .hui-nav > ul > li { border-bottom: solid 1px #222; } .hui-nav-black .hui-nav > ul > li > a:hover, .hui-nav-black .hui-nav > ul > li.current > a { background: #777; } } /*面包导航*/ .hui-nav-toggle, a.hui-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; } .hui-nav-toggle:hover, a.hui-nav-toggle:hover { text-decoration: none; color: #fff; } @media (max-width: 767px) { .mainnav > ul > li { font-size: 1.125em; } } @media (max-width: 480px) { .mainnav > ul > li { text-align: center; width: 20%; } .mainnav > ul > li > a { padding: 0; padding: 0; display: block; } }
4.2.2 面包屑导航
HTML
SCSS
CSS
<div class="hui-breadcrumb"> <i class="hui-iconfont"></i> <a class="maincolor" href="/">首页</a><span class="c-999 en">></span>组件<span class="c-999 en">></span><span class="c-666">导航</span> </div>
.hui-breadcrumb { border-bottom: 1px solid #E5E5E5; overflow: hidden; padding: 10px 0; span { padding: 0 5px; } }
.hui-breadcrumb { border-bottom: 1px solid #E5E5E5; overflow: hidden; padding: 10px 0; } .hui-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对象。【如该容器为】:<div id="page1"></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 顶部导航
HTML
SCSS
CSS
<div class="hui-topnav"> <div class="clearfix"> <div class="f-l">您好,欢迎来到H-ui!</div> <div class="f-r"> <span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="hui-pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="hui-pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="hui-pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a> </span> </div> </div> </div>
.hui-topnav { height: 30px; line-height: 30px; background-color: #f7f7f7; border-bottom: 1px solid #EBEBEB; font-size: 12px; .topbar { background-color: #ECECEC; border-bottom: 1px solid #ddd; a { margin-right: 5px; } } .r_nav { display: inline-block; color: #999; } }
.hui-topnav { height: 30px; line-height: 30px; background-color: #f7f7f7; border-bottom: 1px solid #EBEBEB; font-size: 12px; } .hui-topnav .topbar { background-color: #ECECEC; border-bottom: 1px solid #ddd; } .hui-topnav .topbar a { margin-right: 5px; } .hui-topnav .r_nav { display: inline-block; color: #999; }
4.2.5 导向
第一步
第一步
第二步
第一步
第二步
第三步
第一步
第二步
第三步
第四步
第一步
第二步
第三步
第四步
第五步
HTML
SCSS
CSS
<div class="hui-steps four"> <span class="hui-steps-item">第一步</span> <span class="hui-steps-item active">第二步</span> <span class="hui-steps-item disabled">第三步</span> <span class="hui-steps-item disabled">第四步</span> </div>
.hui-steps { display: inline-block; position: relative; padding: 1em 2em 1em 3em; vertical-align: top; background-color: #FFF; color: #888; -moz-box-sizing: border-box; box-sizing: border-box; @include transition(all .1s ease); &: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; @include transition(all .1s ease); } cursor: pointer; font-size: 0; @include boxShadow(0 0 0 1px rgba(0, 0, 0, .1)); border-radius: .3125rem; line-height: 1; .hui-steps-item { display: inline-block; position: relative; padding: 1em 2em 1em 3em; vertical-align: top; background-color: #FFF; color: #888; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1rem; @include transition(all .1s ease); &: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; @include transition(all .1s ease); } &:first-child { padding-left: 1.35em; border-radius: .3125em 0 0 .3125em; } &:last-child { border-radius: 0 .3125em .3125em 0; margin-right: 0; &:after { display: none } } &:only-child { border-radius: .3125em } &:hover, &.hover { background-color: #F7F7F7; color: rgba(0, 0, 0, .8); &:after { border-left-color: #F7F7F7 } } &.down, &:active { background-color: #F0F0F0; &:after{ border-left-color: #F0F0F0; } } &.active { cursor: auto; background-color: #428BCA; color: #FFF; font-weight: 700; &:after { border-left-color: #428BCA } } &.disabled { cursor: auto; background-color: #FFF; color: #CBCBCB; &: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 { margin: 0; border-radius: .3125em .3125em 0 0; .hui-steps-item { &:first-child { border-radius: .3125em 0 0; } &:last-child { border-radius: 0 .3125em 0 0; } } &.bottom { margin-top: -1px; border-radius: 0 0 .3125em .3125em; .hui-steps-item { &:first-child { border-radius: 0 0 0 .3125em; } &:last-child { border-radius: 0 0 .3125em; } } } } &.one, &.two, &.three, &.four, &.six, &.seven, &.eight { display: block; } &.one { > .hui-steps-item { width: 100%; } } &.two { > .hui-steps-item { width: 50%; } } &.three { > .hui-steps-item { width: 33.333%; } } &.four { > .hui-steps-item { width: 25%; } } &.five { > .hui-steps-item { width: 20%; } } &.six { > .hui-steps-item { width: 16.666%; } } &.seven { > .hui-steps-item { width: 14.285%; } } &.eight { > .hui-steps-item { width: 12.5%; } } &.small { .hui-steps-item { font-size: .8rem } } &.large { .hui-steps-item { font-size: 1.25rem } } }
.hui-steps { display: inline-block; position: relative; padding: 1em 2em 1em 3em; vertical-align: top; background-color: #FFF; color: #888; box-sizing: border-box; transition: all 0.1s ease; cursor: pointer; font-size: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 0.3125rem; line-height: 1; } .hui-steps: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; transition: all 0.1s ease; } .hui-steps .hui-steps-item { display: inline-block; position: relative; padding: 1em 2em 1em 3em; vertical-align: top; background-color: #FFF; color: #888; box-sizing: border-box; font-size: 1rem; transition: all 0.1s ease; } .hui-steps .hui-steps-item: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; transition: all 0.1s ease; } .hui-steps .hui-steps-item:first-child { padding-left: 1.35em; border-radius: 0.3125em 0 0 0.3125em; } .hui-steps .hui-steps-item:last-child { border-radius: 0 0.3125em 0.3125em 0; margin-right: 0; } .hui-steps .hui-steps-item:last-child:after { display: none; } .hui-steps .hui-steps-item:only-child { border-radius: 0.3125em; } .hui-steps .hui-steps-item:hover, .hui-steps .hui-steps-item.hover { background-color: #F7F7F7; color: rgba(0, 0, 0, 0.8); } .hui-steps .hui-steps-item:hover:after, .hui-steps .hui-steps-item.hover:after { border-left-color: #F7F7F7; } .hui-steps .hui-steps-item.down, .hui-steps .hui-steps-item:active { background-color: #F0F0F0; } .hui-steps .hui-steps-item.down:after, .hui-steps .hui-steps-item:active:after { border-left-color: #F0F0F0; } .hui-steps .hui-steps-item.active { cursor: auto; background-color: #428BCA; color: #FFF; font-weight: 700; } .hui-steps .hui-steps-item.active:after { border-left-color: #428BCA; } .hui-steps .hui-steps-item.disabled { cursor: auto; background-color: #FFF; color: #CBCBCB; } .hui-steps .hui-steps-item.disabled:after { border: 0; background-color: #FFF; top: 0.42em; right: -1em; width: 2.15em; height: 2.15em; transform: rotate(-45deg); box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.1) inset; } .hui-steps.attached { margin: 0; border-radius: 0.3125em 0.3125em 0 0; } .hui-steps.attached .hui-steps-item:first-child { border-radius: 0.3125em 0 0; } .hui-steps.attached .hui-steps-item:last-child { border-radius: 0 0.3125em 0 0; } .hui-steps.attached.bottom { margin-top: -1px; border-radius: 0 0 0.3125em 0.3125em; } .hui-steps.attached.bottom .hui-steps-item:first-child { border-radius: 0 0 0 0.3125em; } .hui-steps.attached.bottom .hui-steps-item:last-child { border-radius: 0 0 0.3125em; } .hui-steps.one, .hui-steps.two, .hui-steps.three, .hui-steps.four, .hui-steps.six, .hui-steps.seven, .hui-steps.eight { display: block; } .hui-steps.one > .hui-steps-item { width: 100%; } .hui-steps.two > .hui-steps-item { width: 50%; } .hui-steps.three > .hui-steps-item { width: 33.333%; } .hui-steps.four > .hui-steps-item { width: 25%; } .hui-steps.five > .hui-steps-item { width: 20%; } .hui-steps.six > .hui-steps-item { width: 16.666%; } .hui-steps.seven > .hui-steps-item { width: 14.285%; } .hui-steps.eight > .hui-steps-item { width: 12.5%; } .hui-steps.small .hui-steps-item { font-size: 0.8rem; } .hui-steps.large .hui-steps-item { font-size: 1.25rem; }