html鼠星导航条,导航 - 组件 - H-ui前端框架官方网站

最新推荐文章于 2024-05-19 09:58:49 发布

君子Python

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量387

点赞数

文章标签： html鼠星导航条

导航

4.2.1 导航条

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

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

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

HTML代码

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代码

 首页>组件>菜单

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

调用代码：

$.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 顶部导航

您好，欢迎来到Hui！

HTML代码

您好，欢迎来到Hui！

[ 登录 ] | [ 注册 ] | 收藏本站 | 设为首页

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代码

第一步

第二步

第三步

第四步

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}/*大*/

君子Python

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html鼠星导航条,导航 - 组件 - H-ui前端框架官方网站

导航4.2.1 导航条鼠标经过状态a:hover，当前选中状态li.current。下拉菜单效果，请参考4.3 下拉菜单。navbar-black 是黑色导航风格，自己使用时候，可以去掉这个类名，定制自己的风格。在navbar div上追加 navbar-fixed-top 样式，可以将导航条固定在网页顶部。HTML代码H-ui前端框架H-ui简单 · 免费 · 适合中国网站首页核心扩展一级导...
复制链接

扫一扫