Question

所以我在wordpress中设置了一个动态菜单我之前有一个非动态的菜单，但如下所示。理想情况下，我希望我的新动态wordpress菜单具有与此相同的风格。

<ul id="navbar">
    <li>
        <a class="about" href="#"><img src="<?php bloginfo( 'template_url' ); ?>/images/about.png"></a> <span class="menu"><img src="<?php bloginfo( 'template_url' ); ?>/images/curve2.png">WHO AM I</span>
    </li>

    <li>
        <a class="work" href="#"><img src="<?php bloginfo( 'template_url' ); ?>/images/work.png"></a> <span><img src="<?php bloginfo( 'template_url' ); ?>/images/curve2.png">MY WORK</span>
    </li>

    <li>
        <a class="contact" href="#"><img src="<?php bloginfo( 'template_url' ); ?>/images/contact.png"></a><span><img src="<?php bloginfo( 'template_url' ); ?>/images/curve2.png">GET IN TOUCH</span>
    </li>

    <li>
        <a class="blog" href="#"><img src="<?php bloginfo( 'template_url' ); ?>/images/blog.png"></a> <span><img src="<?php bloginfo( 'template_url' ); ?>/images/curve2.png">INSPIRATION</span>
    </li>



</ul>

并使用以下

进行样式设置

ul {
  position:absolute;
  padding:0;
  width:200px;
  height:220px;
  margin-top: 15em;
  margin-left: 2em;  
  list-style:none;
  -webkit-perspective:1000;
  -moz-perspective:1000;
  -o-perspective:1000;
  perspective:1000;
}

li {
  margin:0.5em 0;
  padding:0;
}

li a {
  display:block;
  height:18px;
  width:20px;
  color:#fff;
  padding:8px 6px;
  text-decoration:none;
  text-align:center;
}
.menu {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
  
}
li span {
  width:130px;
  float:left;
  background: linear-gradient(to right,rgba(22,50,51,0) 0%, rgba(22,50,51,0) 10%, rgba(40,148,148,0.36) 45%, rgba(22,50,51,0.08) 90%, rgba(22,50,51,0) 100%);
  color:#fff;
  margin:-31px 36px;
  padding:4px 4px;
  transform-origin:0%;
  opacity:0;
  -webkit-transform:rotateY(95deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-animation: flip 2s;
  -moz-animation: flip 2s;
  -o-animation: flip 2s;
  animation: flip 2s;
  font-family: Letter Gothic Std, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: .75em;
  color: #dcdbdb;
  letter-spacing: 0.1em;
  text-align: center;
   
}

span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span {
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-delay:.5s;}
li:nth-child(3) span {
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
  -o-animation-delay:.4s;
  animation-delay:.4s;}
li:nth-child(4) span {
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
  -o-animation-delay:.3s;
  animation-delay:.3s;}
li:nth-child(5) span {
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
  -o-animation-delay:.2s;
  animation-delay:.2s;}
li:nth-child(6) span {
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
  -o-animation-delay:.1s;
  animation-delay:.1s;}

li a:hover ~ span {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

我已将图标（图像）添加到菜单中，方法是为每个菜单添加一个类（在wordpress中）并将图像插入到css中（完成下面的操作）虽然我在更改初始css以处理这个新问题时遇到了困难wordpress菜单。（尤其是悬停效果，因为我不确定如何调用插入的图像，以便在悬停时显示菜单的链接。）

#menu-main .about{
background-image:url("images/about.png");
background-repeat: no-repeat; 
}

非常感谢帮助！谢谢你们:)

如何正确地将我的CSS样式和图像添加到动态wordpress菜单中？

0 个答案: