GPT5 免费体验>>>
> WordPress建站 > WordPress基础教程 > Yusi主题纯css的WordPress导航代码分享

Yusi主题纯css的WordPress导航代码分享

WordPress基础教程 陌小雨 5701℃ 0评论

我们知道，yusi主题的导航还是挺炫酷的，纯css打造，对于喜欢折腾wordpress的小伙伴来说，导航作为一个最重要的一部分，如果想移植yusi主题的导航，还是挺容易的。

Css代码：

ul,ol {
  padding: 0;
  margin: 0;
  list-style: none
}

li {
  line-height: 20px
}

ul.inline,ol.inline {
  margin-left: 0;
  list-style: none
}

ul.inline>li,ol.inline>li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding-left: 5px;
  padding-right: 5px
}

body {
  margin: 0;
  font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #555;
  background-color: #eee;
  overflow-x: hidden
}

a {
  color: #00a67c;
  text-decoration: none
}

a:hover,a:focus {
  color: #007046;
  text-decoration: none
}

.nav {
  margin-left: 0;
  margin-bottom: 20px;
  list-style: none
}

.nav i {
  display: inline-block;
  vertical-align: text-bottom
}

.nav>li>a {
  display: block
}

.nav>li>a:hover,.nav>li>a:focus {
  text-decoration: none;
  background-color: #eee
}

.nav>li>a>img {
  max-width: none
}

.nav>.pull-right {
  float: right
}

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  color: #999;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  text-transform: uppercase
}

.nav li+.nav-header {
  margin-top: 9px
}

.navbar {
  height: 52px;
  background-color: #4a4a4a;
  *z-index: 2;
  *zoom: 1;
  opacity: .9;
  clear: both
}

.navbar:before,.navbar:after {
  display: table;
  content: "";
  line-height: 0
}

.navbar:after {
  clear: both
}

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  max-width: 1226px
}

.navbar .nav.pull-right {
  float: right;
  margin-right: 0
}

.navbar .nav>li {
  position: relative;
  float: left;
  margin-right: 1px;
  display: block;
  min-width: 75px;
  width: auto
}

.navbar .nav li a {
  padding: 16px 20px;
  color: #fff
}

.navbar .nav li a:focus,.navbar .nav li a:hover {
  background-color: #16a085;
  color: #fff
}

.navbar .nav .active a,.navbar .nav .active a:hover,.navbar .nav .active a:focus {
  color: #fff;
  background-color: #16a085
}

.navbar .nav li.current-menu-item a,.navbar .nav li.current-menu-parent a,.navbar .nav li.current_page_item a,.navbar .nav li.current-post-ancestor a {
  color: #fff;
  position: relative;
  z-index: 2
}

.navbar .nav li:hover>ul {
  display: block
}

.navbar .nav>li>ul>li>ul {
  /*padding-bottom: 10px;*/
  text-align: left;
  position: absolute;
  left: 100%;
  min-width: 120px;
  z-index: 10;
  display: none;
  font-size: 12px
}

.navbar .nav>li>ul>li {
  float: none;
  margin: 0;
  position: relative;
  background-color: #445552
}

.navbar .nav>li>ul>li>a,.navbar .nav>li>ul>li>ul>li>a {
  float: none;
  display: block;
  *min-width: 100px;
  line-height: 30px;
  padding: 5px 20px 5px;
  color: #fff
}

.navbar .nav>li>ul>li>a:hover,.navbar .nav li li.current-menu-item a {
  color: #fff
}

.navbar .nav li li a:hover,.navbar .nav li li.current-menu-item a {
  background-color: #576663
}

.navbar .nav li:hover a,.navbar .nav li.current-menu-item a,.navbar .nav li.current-menu-parent a,.navbar .nav li.current_page_item a,.navbar .nav li.current-post-ancestor a {
  background-color: #16a085
}

.sub-menu {
  min-width: 130px;
  left: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px
}

.sub-menu li {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  ransform: rotateY(90deg);
  -webkit-transition: opacity .4s,-webkit-transform .5s;
  -moz-transition: opacity .4s,-moz-transform .5s;
  -ms-transition: opacity .4s,-ms-transform .5s;
  -o-transition: opacity .4s,-o-transform .5s;
  transition: opacity .4s,transform .5s
}

.nav>li:hover .sub-menu,.nav>li:focus .sub-menu {
  max-height: 1000px;
  z-index: 10
}

.nav>li:hover .sub-menu li,.nav>li:focus .sub-menu li {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none
}

.nav li:hover .sub-menu li:nth-child(1) {
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -ms-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0
}

.nav li:hover .sub-menu li:nth-child(2) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms
}

.nav li:hover .sub-menu li:nth-child(3) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms
}

.nav li:hover .sub-menu li:nth-child(4) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms
}

.nav li:hover .sub-menu li:nth-child(5) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms
}

.nav li:hover .sub-menu li:nth-child(6) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms
}

.nav li:hover .sub-menu li:nth-child(7) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms
}

.nav li:hover .sub-menu li:nth-child(8) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms
}

.sub-menu li:nth-child(1) {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms
}

.sub-menu li:nth-child(2) {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms
}

.sub-menu li:nth-child(3) {
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms
}

.sub-menu li:nth-child(4) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms
}

.sub-menu li:nth-child(5) {
  -webkit-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  transition-delay: 150ms
}

.sub-menu li:nth-child(6) {
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms
}

.sub-menu li:nth-child(7) {
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  -ms-transition-delay: 50ms;
  -o-transition-delay: 50ms;
  transition-delay: 50ms
}

.sub-menu li:nth-child(8) {
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -ms-transition-delay: 0;
  -o-transition-delay: 0;
  transition-delay: 0
}

前台调用：

<ul class="nav">
			<?php echo str_replace("</ul></div>", "", ereg_replace("<div[^>]*><ul[^>]*>", "", wp_nav_menu(array('theme_location' => 'primary', 'echo' => false)) )); ?>
</ul>

转载请注明：小雨科技 _武汉网站建设_武汉小程序搭建 » Yusi主题纯css的WordPress导航代码分享

喜欢 (0)
发表我的评论
取消评论
表情

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址