Menu personnalisé avec JS dans le thème WordPress

Publié par Jean-Michel le

J’ai mon menu personnalisé dans le thème HTML et je veux créer le même menu mais dans wordpress.

Sur ma page, vous pouvez voir comment cela fonctionne…

Dans ce menu, j’utilise la liste déroulante jQuery et Bootstrap. Comment créer ce menu avec wp_nav_menu ?

Ceci est mon code (HTML, JS, CSS).

<script type="text/javascript">
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

(function($) {

  $.fn.menumaker = function(options) {

      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) {
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});

});
})(jQuery);
</script>
/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */
/* FB, wersja jezykowa */
.fb-language {
  position: fixed;
  bottom: 20px;
  left: 65px;
  list-style: none;
}

/* Ikonka jezyka */
.lang-item {
    display: inline;
}

/* ikonka fb */
.fb-language img {
  display: inline-block;
  width: 20px;
  height: auto;
}

.fb-language p {
  display: inline-block;
  color: #999999;
  font-size: 12px;
  margin-left: 5px;
}

.fb-language a {
  text-decoration: none;
  color: #999999;
}

.fb-language a:hover {
  color: #656565;
  text-decoration: underline;
}

/* Kolor linku w menu jezeli jestes na podstronie */
.current_page_item a {
  color: black !important;
}

.page_item {
  list-style: none !important;
}

.dropdown-toggle .icon-bar {
  margin-bottom:4px;
  margin-top: 4px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
}

/* kolor button'a dla mobilnego menu */
button {
  background-color: rgb(230, 225, 225) !important;
  text-align: left !important;
  left: 8px !important;
  position: absolute;
}

.navbar-header {
  position: fixed !important;
  width: 100% !important;
  height: 45px !important;
  background-color: rgb(255, 255, 255) !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.navbar-header img {
  width: 13% !important;
  height: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}

#wrapper {
    padding-top: 50px;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    background-color: rgb(214, 214, 214);
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */
.sidebar-nav {
    position: block;
    top: 0;
    width: 250px;
    margin: 0;
    padding-top: 9px;
    padding-left: 50px;
    list-style: none;
    text-align: left;
}

.sidebar-nav li {
    list-style: none;
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a.bez:before {
  content: " " !important;
}

.sidebar-nav li a {
    display: block;
    line-height: 18px;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #000;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    font-size: 14px;
    line-height: 30px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #000;
    background: none;
}

.sidebar-nav > .sidebar-links {
    padding-left: 43px;
}

.sidebar-nav2 {
    position: block;
    top: 0;
    width: 250px;
    margin: 0;
    padding-top: 60px;
    padding-left: 80px;
    list-style: none;
    text-align: left;
    list-style: none;
    text-transform: lowercase;
}

.sidebar-nav2 li {
    text-indent: 20px;
    line-height: 24px;
}

.sidebar-nav2 li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav2 li a:hover {
    text-decoration: none;
    color: #000;
}

.sidebar-nav2 li a:active,
.sidebar-nav2 li a:focus {
    text-decoration: none;
}

@media(max-width: 769px) {
  #wrapper {
    padding-top: 70px !important;
  }

  .sidebar-nav {
    padding-top: 5px !important;
    margin-top: 0;
  }

  .fb-language {
    position: absolute;
    bottom: 20px;
    left: 65px;
    z-index: 10;
  }
}

@media(min-width:769px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
        background-color: rgb(214, 214, 214);
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Sidebar -->
<div class="navbar-header navbar-toggle">
  <button href="#menu-toggle" class="btn btn-xs btn-default dropdown-toggle" id="menu-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  </a>
</div>
<div id="sidebar-wrapper">
    <div class="sidebar-nav">
      <li class="sidebar-brand"><span class="brand"></span> <a href="#arch" data-toggle="collapse" data-parent="#MainMenu">ARCHITEKTURA</a></li>
      <ul class="collapse" id="arch">
        <li><a href="#jedno" data-toggle="collapse" data-parent="#arch">jednorodzinne</a></li>
        <ul class="collapse" id="jedno">
          <li><a href="opolski.html" data-parent="#jedno">dom opolski</a></li>
          <li><a href="#" data-parent="#jedno">dom 2</a></li>
          <li><a href="#" data-parent="#jedno">dom 3</a></li>
        </ul>
        <li><a href="#wielo" data-toggle="collapse" data-parent="#arch">wielorodzinne</a></li>
        <ul class="collapse" id="wielo">
          <li><a href="#" data-parent="#wielo">dom 1</a></li>
          <li><a href="#" data-parent="#wielo">dom 2</a></li>
          <li><a href="#" data-parent="#wielo">dom 3</a></li>
        </ul>
        <li><a href="#uslu" data-toggle="collapse" data-parent="#arch">us?ugowe</a></li>
        <ul class="collapse" id="uslu">
          <li><a href="przedszkole.html" data-parent="#uslu">przedszkole w Chró?cicach</a></li>
          <li><a href="#" data-parent="#uslu">obiekt 2</a></li>
          <li><a href="#" data-parent="#uslu">obiekt 3</a></li>
        </ul>
      </ul>
      <li class="sidebar-brand"><a href="#design" data-toggle="collapse" data-parent="#MainMenu">PORT DESIGN</a></li>
      <ul class="collapse" id="design">
        <li><a href="#meble" data-toggle="collapse" data-parent="#design">meble</a></li>
        <ul class="collapse" id="meble">
          <li><a href="stol.html" data-parent="#meble">stó? 1</a></li>
          <li><a href="#" data-parent="#meble">stó? 2</a></li>
          <li><a href="#" data-parent="#meble">krzes?o 1</a></li>
        </ul>
        <li><a href="#ceramika" data-toggle="collapse" data-parent="#design">ceramika</a></li>
        <ul class="collapse" id="ceramika">
          <li><a href="#" data-parent="#ceramika">ceramika 1</a></li>
          <li><a href="#" data-parent="#ceramika">ceramika 2</a></li>
          <li><a href="#" data-parent="#ceramika">ceramika 3</a></li>
        </ul>
        <li><a href="#grafika" data-toggle="collapse" data-parent="#design">grafika</a></li>
        <ul class="collapse" id="grafika">
          <li><a href="#" data-parent="#grafika">grafika 1</a></li>
          <li><a href="#" data-parent="#grafika">grafika 2</a></li>
          <li><a href="#" data-parent="#grafika">grafika 3</a></li>
        </ul>
        <li><a href="#inne" data-toggle="collapse" data-parent="#design">inne</a></li>
        <ul class="collapse" id="inne">
          <li><a href="#" data-parent="#inne">inne 1</a></li>
          <li><a href="#" data-parent="#inne">inne 2</a></li>
          <li><a href="#" data-parent="#inne">inne 3</a></li>
        </ul>
      </ul>
      <li class="sidebar-brand"><a href="#miejsce" data-toggle="collapse" data-parent="#MainMenu">PORT MIEJSCE</a></li>
      <ul class="collapse" id="miejsce">
        <li><a href="#kawiarnia" data-toggle="collapse" data-parent="#miejsce">kawiarnia</a></li>
        <ul class="collapse" id="kawiarnia">
          <li><a href="kawa.html" data-parent="#kawiarnia">kawa</a></li>
          <li><a href="#" data-parent="#kawiarnia">?niadanie</a></li>
          <li><a href="#" data-parent="#kawiarnia">wydarzenia</a></li>
        </ul>
        <li><a href="#coworking" data-toggle="collapse" data-parent="#miejsce">coworking</a></li>
        <ul class="collapse" id="coworking">
          <li><a href="#" data-parent="#coworking">coworking 1</a></li>
          <li><a href="#" data-parent="#coworking">coworking 2</a></li>
          <li><a href="#" data-parent="#coworking">coworking 3</a></li>
        </ul>
        <li><a href="#warsztat" data-toggle="collapse" data-parent="#miejsce">warsztat</a></li>
        <ul class="collapse" id="warsztat">
          <li><a href="#" data-parent="#warsztat">warsztat 1</a></li>
          <li><a href="#" data-parent="#warsztat">warsztat 2</a></li>
          <li><a href="#" data-parent="#warsztat">warsztat 3</a></li>
        </ul>
        <li><a href="#" data-parent="#miejsce">cennik</a></li>
      </ul>
    </div>

    </div>

</div>

Solution n°1 trouvée

J’utilise le navwalker bootstrap wordpress pour utiliser le menu bootstrap. Vous pouvez facilement modifier le déambulateur.

Lire également:  Problème wordpress enfant dans l'admin

Essayez https://github.com/twittem/wp-bootstrap-navwalker

~ Némé

Solution n°2 trouvée

Dans WordPress, les menus sont généralement créés à l’aide de l’interface utilisateur du tableau de bord d’administration. Utilisation de l’apparence -> Menus.

La capacité de liste déroulante se fait en indentant les éléments de sous-menu à l’élément de menu parent. Ensuite, soit vous ajoutez votre propre JavaScript pour manipuler le comportement du menu actuel, soit votre thème actuel peut le faire exactement comme vous le souhaitez.

Lire également:  Créer un thème Wordpress à l'aide de Bedrock ne fonctionne pas

Je chercherais également à utiliser le bon thème.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *