Toolbar Menu


今日为大家提供一款菜单工具条,这是很多网站常用的表现方式,常用于分享页面的展开,闲话不多说,直接上代码。 HTML CODE <div class="page-menu-wrapper clearfix"> <ul cl...
今日为大家提供一款菜单工具条,这是很多网站常用的表现方式,常用于分享页面的展开,闲话不多说,直接上代码。


HTML CODE

<div class="page-menu-wrapper clearfix">
<ul class="menu-function">
<li>
<a href="" title="">CATEGORIES</a>
<ul class="dropdown-menu categories">
<li><a href="" title="">Design</a></li>
<li><a href="" title="">Freebies</a></li>
<li><a href="" title="">Tutorials</a></li>
<li><a href="" title="">Coding</a></li>
<li><a href="" title="">Inspiration</a></li>
<li><a href="" title="">WordPress</a></li>
<li><a href="" title="">Resources</a></li>
</ul>
</li>
<li><a href="" title="">SHOP</a></li>
<li id="search">
<a href="#search" title="">SEARCH</a>
</li>
<li id="search-hidden">
<input type="text" name="" id=""><a href="#search-hidden" title=""></a>
</li>
</ul>
<ul class="menu-share">
<li>
<a href="" title="">FOLLOW US</a>
<ul class="dropdown-menu follow">
<li><a href="" title="">RSS</a></li>
<li><a href="" title="">Twitter</a></li>
<li><a href="" title="">Facebook</a></li>
<li><a href="" title="">Google+</a></li>
<li><a href="" title="">Dribbble</a></li>
</ul>
</li>
<li>
<a href="" title="">SHARE</a>
<ul class="dropdown-menu share">
<li><a href="" title="">Facebook</a></li>
<li><a href="" title="">Twitter</a></li>
<li><a href="" title="">Google+</a></li>
</ul>
</li>
</ul>
</div>

CSS CODE

body {
background-color: #F6F8F8;
}
a {
color: #fff;
}
a:hover {
color: #3d61a2;
text-decoration: none;
}
.demo {
margin-top: 40px;
min-height: 300px;
}
.page-menu-wrapper {
width: 960px;
line-height: 45px;
margin: 0 auto;
background-color: #446cb3;
}
.page-menu-wrapper > ul > li {
position: relative;
float: left;
border-left: 1px solid #3d61a2;
border-right: 1px solid #3d61a2;
margin-right: -1px;
}
.menu-function {
float: left;
}
.menu-share {
float: right;
}
.page-menu-wrapper > .menu-function > li:first-child {
border-left: none;
}
.page-menu-wrapper > .menu-share > li:last-child {
border-right: none;
}
.page-menu-wrapper a {
position: relative;
display: block;
padding: 0 15px;
transition: all .3s ease-out;
}
.page-menu-wrapper > ul > li:hover > a {
color: #3d61a2;
background-color: #fff;
}
.page-menu-wrapper > ul > li:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
display: none;
position: absolute;
width: 260px;
font-size: 18px;
font-weight: bold;
text-align: left;
background-color: #fff;
}
.dropdown-menu.categories a {
color: #000;
}
.dropdown-menu.categories a:hover {
color: #5bc4be;
margin-left: 10px;
}
#search:target a[href="#search"] {
display: none;
}
#search:target ~ #search-hidden {
display: block;
}
#search-hidden {
display: none;
padding: 0 5px;
background-color: #fff;
}
#search-hidden input {
border: none;
line-height: 24px;
width: 180px;
}
#search-hidden a {
float: right;
padding: 0;
width: 20px;
height: 45px;
}
#search-hidden a:before {
content: "7d";
left: 0;
color: #446cb3;
}
.menu-function > li > a,.menu-share > li > a {
padding-left: 40px;
}
.page-menu-wrapper a:before {
position: absolute;
left: 15px;
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
font-smoothing: antialiased;
font-size: 18px;
vertical-align: middle;
}
.menu-function > li:nth-child(1) > a:before {
content: "e048";
}
.menu-function > li:nth-child(2) > a:before {
标签: toolbar

更多 toolbar 相关资讯