【发布时间】:2014-09-18 23:23:54
【问题描述】:
我正在开发一个新的 wordpress 主题,并想创建一个大型下拉菜单,那么如何
我可以用 wordpress 将子菜单和超级菜单类添加到菜单中吗
所有以“anime”开头的类都代表一个单独的动画类型
'dropa' 类用于下拉菜单(不是超级菜单)。 'mega-dropa' 类仅适用于大型菜单。
<div class="navi">
<nav class="navbar-right">
<ul>
<li class="dropodown"><button class="fa fa-plus visible-xs visible-ms"></button><a href="index.html">Home</a>
<ul class="dropadown dromobile dropa anime-rotate-scale">
<li>Choose your homepage style<hr></li>
<li class="col-xs-12 col-ms-6"><i class ="fa fa-home"></i> <a href="index-2.html" title="">Home-2</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-home"></i> <a href="index-3.html" title="">Home-3</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-home"></i> <a href="index-4.html" title="">Home-4</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-home"></i> <a href="index-5.html" title="">Home-5</a></li>
</ul>
</li>
<li class="dropodown raw"><button class="fa fa-plus visible-xs visible-ms"></button><a href="products.html">Products</a>
<ul class="dropadown dromobile mega-drop-liste mega-dropa anime-scale">
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Website developpement</a><hr>
<ul>
<li><i class="fa fa-html5"></i>Html5</li>
<li><i class="fa fa-css3"></i>Css3</li>
<li><i class="fa fa-joomla"></i>Javascripy</li>
<li><i class="fa fa-wordpress"></i>jQuery</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Mobile app developpement</a><hr>
<ul>
<li><i class="fa fa-windows"></i>Node Js</li>
<li><i class="fa fa-gamepad"></i>Backbone</li>
<li><i class="fa fa-android"></i>Android developpement</li>
<li><i class="fa fa-apple"></i>iOs developpement</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Photoshop & Illustrator</a><hr>
<ul>
<li>Images retouching</li>
<li>Vector icons design</li>
<li>Logo and Brand design</li>
<li>Wallpaper and Background</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">3d Max & Maya</a><hr>
<ul>
<li>Html5</li>
<li>Css3</li>
<li>Tutorial</li>
<li>Snippets</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">h3Html5 & Css3</a><hr>
<ul>
<li><img src="images/iphone1.jpg" alt=""></li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Html5 & Css3</a><hr>
<ul>
<li><img src="images/iphone1.jpg" alt=""></li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Html5 & Css3</a><hr>
<ul>
<li><img src="images/iphone1.jpg" alt=""></li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Html5 & Css3</a><hr>
<ul>
<li><img src="images/iphone1.jpg" alt=""></li>
</ul>
</li>
</ul>
</li>
<li class="dropodown"><button class="fa fa-plus visible-xs visible-ms"></button><a href="about-us.html">About us</a>
<ul class="dropadown dromobile mega-drop-liste mega-dropa anime-rotate-3d">
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Html5 & Css3</a><hr>
<ul>
<li>Html5</li>
<li>Css3</li>
<li>Tutorial</li>
<li>Snippets</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Html5 & Css3</a><hr>
<ul>
<li>Html5</li>
<li>Css3</li>
<li>Tutorial</li>
<li>Snippets</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">Photoshop & Illustrator</a><hr>
<ul>
<li>Html5</li>
<li>Css3</li>
<li>Tutorial</li>
<li>Snippets</li>
</ul>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-md-3 col-lg-3"><a href="#">3d Max & Maya</a><hr>
<ul>
<li>Html5</li>
<li>Css3</li>
<li>Tutorial</li>
<li>Snippets</li>
</ul>
</li>
</ul>
</li>
<li class="dropodown"><button class="fa fa-plus visible-xs visible-ms"></button><a href="services.html">Services</a>
<ul class="dropadown dromobile dropa anime-scale">
<li>Choose your portflio style<hr></li>
<li class="col-xs-12 col-ms-6"><i class ="fa fa-print"></i> Portfolio-4-columns</li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-camera"></i> Portfolio-3-columns</li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-th"></i> Portfolio-2-columns</li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-book"></i> Portfolio-mixed-columns</li>
</ul>
</li>
<li class="dropodown"><button class="fa fa-plus visible-xs visible-ms"></button><a href="portfolio.html">Portfolio</a>
<ul class="dropadown dromobile dropa anime-rotate-3d">
<li>Choose your portflio style<hr></li>
<li class="col-xs-12 col-ms-6"><i class ="fa fa-print"></i><a href="portfolio-1.html">Portfolio-1</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-camera"></i><a href="portfolio-2.html">Portfolio-2</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-th"></i><a href="portfolio-3.html">Portfolio-3</a></li>
<li class="col-xs-12 col-ms-6"><i class="fa fa-book"></i><a href="portfolio-4.html">Portfolio-4</a></li>
</ul>
</li>
<li><a href="contact-us.html">Contact us</a></li>
</ul>
</nav>
</div>
【问题讨论】:
-
你的问题不清楚。
-
我只想把这个巨型菜单转换成 wordpress 菜单
标签: html wordpress css drop-down-menu