藤藤每日一练——Toolbar Menu

发布于 藤藤

辞岁迎新,在2012年w3cplus为大家提供了116个案例,其中案例有原创,也有仿制,同时也有转载,但这些案例都是最新,最有创意的,也是我们精心挑选的,让我从中获益不浅。从藤藤加入w3cplus后,我们开辟了一个藤藤每日一练 栏目,她经过自己的努力和大有分享了近四十个有关于CSS3的案例,这些案例有的是独立创造的,有的是根据国上知名的设计图,将设计转换为CSS3的code。我想有很多同学从中学到了自己想学的知识。我们将在2013年会为大家推出更多的、更有意义的案例。今天藤藤为大家提供新年来第一个案例。希望大家喜欢,更希望大家能支持我们w3cplus的发展。

demodownload

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 {
  content: "\3b";
}
.menu-function > li:nth-child(3) > a:before {
  content: "\7d";
}
.menu-share > li:nth-child(1) > a:before {
  content: "\e0a2";
}
.menu-share > li:nth-child(2) > a:before {
  content: "\e05b";
}
/*follow*/
.dropdown-menu.follow {
  width: 223px;
}
.dropdown-menu.follow a {
  padding-left: 35px;
  font-size: 14px;
}
.dropdown-menu.follow a:before {
  left: 10px;
}
.dropdown-menu.follow li:nth-child(1) a:before {
  content: "\e0a5";
}
.dropdown-menu.follow li:nth-child(2) a:before {
  content: "\e0a2";
}
.dropdown-menu.follow li:nth-child(3) a:before {
  content: "\e04c";
}
.dropdown-menu.follow li:nth-child(4) a:before {
  content: "\e022";
}
.dropdown-menu.follow li:nth-child(5) a:before {
  content: "\e03d";
}
.dropdown-menu.follow li:nth-child(1) a {
  color: #ffaa31;
}
.dropdown-menu.follow li:nth-child(2) a {
  color: #07beed;
}
.dropdown-menu.follow li:nth-child(3) a {
  color: #314d91;
}
.dropdown-menu.follow li:nth-child(4) a {
  color: #2d2d2d;
}
.dropdown-menu.follow li:nth-child(5) a {
  color: #e84788;
}
.dropdown-menu.follow li:nth-child(1):hover {
  background-color: #ffaa31;
} 
.dropdown-menu.follow li:nth-child(2):hover {
  background-color: #07beed;
} 
.dropdown-menu.follow li:nth-child(3):hover {
  background-color: #314d91;
} 
.dropdown-menu.follow li:nth-child(4):hover {
  background-color: #2d2d2d;
} 
.dropdown-menu.follow li:nth-child(5):hover {
  background-color: #e84788;
} 
.dropdown-menu.follow li:hover a {
  color: #fff;
  margin-left: 10px;
} 
.dropdown-menu.share {
  width: 120px;  
  right:0;
}
.dropdown-menu.share a {
  margin: 10px;
  line-height: 26px;
  font-size: 12px;
  padding-left: 20px;
  border: 1px solid #cbcbcb;
  border-radius: 2px;
  color: #4c4c4c;
  background-color: #efefef;
}
.dropdown-menu.share a:hover {
  background-color: #fff;
}
.dropdown-menu.share li a:before {
  font-size: 12px;
  left: 5px;
}
.dropdown-menu.share li:nth-child(1) a:before {
  content: "\e04c";
  color: #314d91;
}
.dropdown-menu.share li:nth-child(2) a:before {
  content: "\e0a2";
  color: #07beed;
}
.dropdown-menu.share li:nth-child(3) a:before {
  content: "\e022";
  color: #2d2d2d;
}
@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

如需转载,烦请注明出处:https://www.fedev.cn/demo/toolbar-menu.html

jordan retro 11 mens cheap