前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >界面组件之导航菜单备案

界面组件之导航菜单备案

作者头像
小蔚
发布2019-09-11 17:47:23
1.9K0
发布2019-09-11 17:47:23
举报
文章被收录于专栏:小蔚记录

界面组件一、分页导航菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>分页导航</title>

<style>

* {

margin: 0;

padding: 0;

}

.pagination {

margin: 10px;

/*取消项目列表*/

list-style-type: none;

/*包裹浮动元素*/

overflow: hidden;

display: inline-block;

}

/*内联元素包裹性*/

.pagination li {

display: inline;

}

.pagination a {

/*带有方向的display: inline-block元素*/

float: left;

/*消除文本修饰*/

text-decoration: none;

padding: .5em;

border: 1px solid #ddd;

font-size: 12px;

color: #428bca;

line-height: 1.42857143;

padding: 6px 12px;

}

/*非首子元素取消左边框*/

.pagination li + li a {

border-left: none;

}

/*第一个与最后一个子元素添加圆角效果*/

.pagination li:first-child a {

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

}

.pagination li:last-child a {

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

}

/*鼠标移上效果*/

.pagination a:hover {

}

/*伪类 prev箭头*/

.pagination a[rel="prev"]:before {

content: "\00AB";

padding-right: .5em;

}

/*伪类 next箭头*/

.pagination a[rel="next"]:after {

content: "\00BB";

padding-left: 0.5em;

}

</style>

</head>

<body>

<ul class="pagination">

<li><a href="#" rel="prev">prev</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>

<li><a href="#" rel="next">next</a></li>

</ul>

</body>

</html>

界面组件二、纵向导航菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>界面组件二、纵向导航菜单</title>

<style>

ul.nav {

margin: 0;

padding: 0;

list-style-type: none;

width: 10em;

border: 1px solid #486B02;

}

/*非首子元素*/

.nav li + li a {

border-top: 1px solid #E4FFD3;

}

.nav a {

display: block;

color: #2B3F00;

text-decoration: none;

background: url(img/icon.png) no-repeat 5px 50%;

padding: 0.3em 2em;

}

.nav a:hover, .nav a:focus, .nav li.active a {

color: #3F51B5;

background: url(img/iconH.png) no-repeat 5px 50%;

}

</style>

</head>

<body>

<ul class="nav">

<li><a href="#">Home</a></li>

<li class="active"><a href="#">About</a></li>

<li><a href="#">Our Service</a></li>

<li><a href="#">Our work</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Contact</a></li>

</ul>

</body>

</html>

界面组件四、三级菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>界面组件四、三级菜单</title>

<style>

body {

}

/*添加视觉样式*/

.multi_drop_menu {font:1em helvetica, arial, sans-serif;}

.multi_drop_menu a {

/*让链接充满列表项*/

display:block;

/*文本颜色*/

color:#555;

/*背景颜色*/

/*链接的内边距*/

padding:.2em 1em;

/*分隔线宽度*/

border-width:3px;

/*可以有颜色,也可以透明*/

border-color:transparent;

}

.multi_drop_menu a:hover {

/*悬停时文本颜色*/

color:#fff;

/*悬停时背景色*/

}

.multi_drop_menu a:active {

/*点击时背景变色*/

background:#fff;

/*点击时文本变色*/

color:#ccc;

}

/*添加功能样式*/

.multi_drop_menu * {margin:0; padding:0;}

/*强制 ul 包围 li*/

.multi_drop_menu ul {float:left;}

.multi_drop_menu li {

/*水平排列菜单项*/

float:left;

/*去掉默认的项目符号*/

list-style-type:none;

/*为子菜单提供定位上下文*/

position:relative;

}

.multi_drop_menu li a {

/*让链接填充列表项*/

display:block;

/*给每个链接添加一个右边框*/

border-right-style:solid;

/*背景只出现在内边距区域后面*/

background-clip:padding-box;

/*去掉链接的下划线*/

text-decoration:none;

}

.multi_drop_menu li:last-child a {border-right-style:none;}

/*临时隐藏低级菜单*/

.multi_drop_menu li ul {display:none;}

/* 添加的视觉样式 */

/*二级菜单宽度*/

.multi_drop_menu li ul {width:9em;}

.multi_drop_menu li li a {

/*去掉继承的右边框*/

border-right-style:none;

/*添加上边框*/

border-top-style:solid;

}

/* 添加的功能样式 */

.multi_drop_menu li ul {/*临时显示二级下拉菜单*/

display:block;

/*相对于父菜单项定位*/

position:absolute;

/*左边与父菜单项对齐*/

left:0;

/*顶边与父菜单项底边对齐*/

top:100%;

}

.multi_drop_menu li li {

/*停止浮动,恢复堆叠*/

float:none;

}

.multi_drop_menu li li ul {

/*继续隐藏三级下拉菜单*/

display:none;

}

.multi_drop_menu li ul {

/*隐藏二级下拉菜单*/

display:none;/*相对于父菜单项定位*/

position:absolute;

/*左边与父菜单项对齐*/

left:0;

/*顶边与父菜单项底边对齐*/

top:100%;

}

.multi_drop_menu li:hover > ul {

/*父元素悬停时显示*/

display:block;

}

.multi_drop_menu li li ul {

/*相对于父菜单定位*/

position:absolute;

/*与父菜单右侧对齐*/

left:100%;

/*与父菜单项顶边对齐*/

top:0;

}

/*顶级垂直菜单宽度*/

.multi_drop_menu.vertical {width:8em;}

.multi_drop_menu.vertical li a {

border-right-style:none;

border-top-style:solid;

}

.multi_drop_menu.vertical li li a {border-left-style:solid;}

.multi_drop_menu.vertical ul,

.multi_drop_menu.vertical li {

/*让顶级菜单垂直显示*/

float:none;

}

.multi_drop_menu.vertical li ul {

/*子菜单左边与上一级菜单右边对齐*/

left:100%;

/*子菜单顶边与上一级菜单项顶边对齐*/

top:0;

}

</style>

</head>

<body>

<nav class="multi_drop_menu vertical">

<!-- 一级开始 -->

<ul>

<li><a href="#">Power</a></li>

<li><a href="#">Money</a></li>

<li><a href="#">Love</a></li>

<li><a href="#">Fame</a>

<!-- 二级开始 -->

<ul>

<li><a href="#">Sports Star</a></li>

<li><a href="#">Movie Star</a></li>

<li><a href="#">Rock Star</a>

<!-- 三级开始 -->

<ul>

<li><a href="#">Bruce Springsteen</a></li>

<li><a href="#">Bono</a></li>

<li><a href="#">Mick Jagger</a></li>

<li><a href="#">Bob Dylan</a></li>

</ul>

<!-- 三级结束 -->

</li>

<li><a href="#">Web Designer</a></li>

</ul>

<!-- 二级结束 -->

</li>

</ul>

<!-- 一级结束 -->

</nav>

</body>

</html>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档