【问题标题】:Convert mega menu drop down to wordpress将巨型菜单下拉菜单转换为 wordpress
【发布时间】: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


【解决方案1】:

在我看来,这样的自定义菜单最好使用wp_get_nav_menu_items()创建自己的自定义菜单,看看下面的这个链接,里面也有一个例子,也许它可以帮助你.

http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-05
    • 2014-02-23
    • 2012-05-17
    • 1970-01-01
    • 1970-01-01
    • 2011-07-05
    • 2017-02-17
    相关资源
    最近更新 更多