- Bootstrap linkedin behance

Documentation Massive

Thème HTML5 multipage et une page

création: 15/08/2015

Sur cette page

Styles de menu d'en-tête

Vous pouvez choisir l'une de ces variantes pour la barre de menu d'en-tête :

  • Menu light/white
  • Menu dark
  • Menu transparent
  • Menu semi-transparent
  • Menu flottant
  • Menu central
  • Menu en pied de page
  • Menu dotted
  • Menu push
  • Menu de gauche (light)
  • Menu de gauche (dark)
  • Menu de gauche (push)
  • Menu du bas de la bordure
  • Menu de liens de la zone de bordure
  • Menu de lien de boîte

Structure HTML


<!--header start-->
<header id="header" class="header-full-width">
   <div class="header-sticky light-header">
      <div class="container">
         <div id="massive-menu" class="menuzord">
         <!--logo start-->
         <a href="index.html" class="logo-brand">
         <img class=<"retina" src="img/logo.png" alt=""/>
         </a>
         <!--logo end-->

         <!--mega menu start-->
         <ul class="menuzord-menu pull-right">
            <li><a href="#">Home</a> </li>
            ...
         </ul>
         <!--mega menu end-->
         </div>
      </div>
   </div>
</header>
<!--header end-->

 

Structure HTML du menu sombre. Ajoutez simplement le nom de la classe dark-header dans <div class="head">


<!--header start-->
<header id="header" class="header-full-width">
   <div class="header-sticky dark-header">
      <div class="container">
         <div id="massive-menu" class="menuzord">
         ...                
         </div>
      </div>
   </div>
</header>
<!--header end-->

 

Structure HTML du menu transparent. Ajoutez simplement le nom de la classe transparent-header dans la balise <head>


<!--header start-->
<header id="header" class="header-full-width transparent-header">
   <div class="header-sticky light-header">
      <div class="container">
         <div id="massive-menu" class="menuzord">
         ...
         </div>
      </div>
   </div>
</header>
<!--header end-->

 

Structure HTML du menu semi-transparent. Dans le menu semi-transparent, le nom de classe transparent-header doit être placé dans la balise <head>. Et le nom de classe semi-transparent dans la balise <head> collante et besoin d'une lumière de nom de classe dans la balise <ul class="menuzord-menu pull-right light"> comme suit :


<!--header start-->
<header id="header" class="header-full-width transparent-header">
   <div class="header-sticky semi-transparent">
      <div class="container">
         <div id="massive-menu" class="menuzord">
            <ul class="menuzord-menu pull-right light">
            ...
            </ul>
         </div>
      </div>
   </div>
</header>
<!--header end-->

 

Structure HTML


<header id="header" class="transparent-header  floating-menu">
   <div class="header-sticky">
      <div class="container mainmenu light-nav ">
         <div id="massive-menu" class="menuzord">
            <ul class="menuzord-menu pull-right" id="menu-list">
            ...
            </ul>
         </div>
      </div>
      
      <!--alternate menu appear start-->
      <div class="menu-appear-alt">
         <div class="container">
            <div id="massive-menu-alt" class="menuzord">
            <!--alternate menu appearing here ... -->
            </div>
         </div>
      </div>
      <!--alternate menu appear end--<   
   </div>
</header>
<!--header end-->

 

Structure HTML du menu central.


<!--header start-->
<header id="header" class="nav-center-align">
   <div class="light-header">
      <div class="container mainmenu">
         <div id="massive-menu" class="menuzord">

         <!--logo start-->
         <a href="index.html" class="logo-brand">
         <img class="retina" src="img/logo.png" alt=""/>
         </a>
         <!--logo end-->

         <!--mega menu start-->
         <ul class="menuzord-menu border-tb" id="menu-list">
         ...
         </ul>
         <!--mega menu end-->
         </div>
      </div>

      <!--alternate menu appear start-->
      <div class="menu-appear-alt">
         <div class="container">
            <div id="massive-menu-alt" class="menuzord">
            <!--alternate menu appearing here ... -->
            </div>
         </div>
      </div>
      <!--alternate menu appear end-->

 

Structure HTML du menu du bas. Ajouter le nom de classe nav-bottom dans la balise <head>


<!--header start-->
<header id="header" class="nav-bottom">
   <header id="light-header">
      <div class="container">
         <div id="massive-menu" class="menuzord">

         <!--logo start-->
         <a href="index.html" class="logo-brand">
         <img class="retina" src="img/logo.png" alt=""/>
         </a>
         <!--logo end-->

         <!--mega menu start-->
         <ul class="menuzord-menu dark pull-right">
         ...
        </ul>    
         <!--mega menu end-->
         </div>
      </div>
   </div>
</header>
<!--header end-->

 

Structure HTML du menu dotted. Pour le menu en pointillé, vous devez ajouter ce qui suit dans la section <head>


<!--for dotted nav-->
<link href="css/dotted-nav.css" rel="stylesheet">

<!--need this for dotted nav-->
<script src="js/modernizr.js"></script>

et la structure HTML est 


<!--header start-->
   <ul>
      <li>
      <a href="#">
      
      Intro
      </a>
      </li>
      <li>
      <a href="#">
      
      About
      </a>
      </li>
      <li>
      <a href="#">
      
      Features
      </a>
      </li>
      <li>
      <a href="#">
      
      Portfolio
      </a>
      </li>
      <li>
      <a href="#">
      
      Pricing
      </a>
      </li>
      <li>
      <a href="#">
      
      Contact
      </a>
      </li>
    </ul>
</nav>
<!--header end-->

 

Structure HTML du menu Push. Pour le menu push, vous devez ajouter ce qui suit dans la section <head>



<!--for dotted nav-->
<link href="css/dotted-nav.css" rel="stylesheet">

<!--need this for dotted nav-->
<script src="js/modernizr.js"></script>

et la structure HTML est


<!--header start-->
<a href="#cd-nav" class="cd-nav-trigger">Menu
   <span class="cd-nav-icon"></span>
   <svg x="0px" y="0px" width="54px"height="54px" viewBox="0 0 54 54">
   <circle r="50" fill="transparent"></circle></svg>
</a>

<div id="cd-nav" class="cd-nav">
   <div class="cd-navigation-wrapper">
      <div class="cd-half-block">
      <h2>Navigation</h2>
      <nav>
         <ul class="cd-primary-nav">
            <li class="selected">
            <a href="#">Home</a>
            </li>
            <li  class="">
            <a href="#">About Us</a>
            </li>
            ...
         </ul>

     </nav>
      </div>

      <div class="cd-half-block">
      <address>
      <ul class="cd-contact-info">
         <li><a href="mailto:themebucket@gmail.com">themebucket@gmail.com</a></li>
         <li>0123-12345678</li>
         <li>
         <span>DreamLand Street</span>
         <span>XYZ -123 Lane</span>
         <span>Melbourne, Australia</span>
         </li>
      </ul>
      </address>
      </div>
    </div>
</div>
<!--header end-->

 

Structure HTML du menu de gauche (light)


<body class="left-nav-fixed">
   <div class="wrapper">
   <!--header start-->
      <header id="header" class="header-full-width">
         <div class="light-header">
            <div class="container">
               <div id="massive-menu" class="menuzord">
    
               <!--logo start here-->
               <!--mega menu start-->
               <ul class="menuzord-menu pull-right">
               ...
               </ul>
               <!--mega menu end-->    
               </div>
             </div>
          </div>
    
         <div class="side-social-link clearfix visible-md visible-lg">
          <a href="#">
          <i class="fa fa-facebook"></i>
          </a>
    
          <a href="#">
          <i class="fa fa-twitter"></i>
          </a>
    
          <a href="#">
          <i class="fa fa-google-plus"></i>
          </a>
    
          <a href="#">
          <i class="fa fa-pinterest"></i>
          </a>
    
          <a href="#">
          <i class="fa fa-linkedin"></i>
          </a>
          </div>
      </header>
      <!--header end-->     
      </div>


<!-- Js placé à la fin du document pour que les pages se chargent plus rapidement -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/menuzord.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.isotope.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.countTo.js"></script>
<script src="js/breakpoint.js"></script>
<script src="js/smooth.js"></script>
<script src="js/wow.min.js"></script>

<script src="js/imagesloaded.js"></script>
<!--common scripts-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var bodyclass = $("body").attr("class");
        $.BreakPoint({
            breakpoints: {
                tablet: {
                    max: 768,
                    callback: function () {
                        $("body").removeClass(bodyclass);
                    }
                },
                desktop:{
                    min: 769,
                    callback: function () {
                        $("body").addClass(bodyclass);
                    }
                }
            }
        });
    });
</script>
</body>

 

La structure HTML est similaire à la structure ci-dessus. Ajoutez simplement le nom de classe supplémentaire side-push-nav et side-nav-close dans la balise <body>


<body class= "left-nav-fixed side-push-nav side-nav-close">

et le script js suivant requis.


<script type="text/javascript">
    $(document).ready(function () {
        var bodyclass = $("body").attr("class");
        $.BreakPoint({
            breakpoints: {
                tablet: {
                    max: 768,
                    callback: function () {
                        $("body").removeClass(bodyclass);
                    }
                },
                desktop: {
                    min: 769,
                    callback: function () {
                        $("body").addClass(bodyclass);
                    }
                }
            }
        });

        $(".side-nav-toggle").on("click",function(e){
            e.preventDefault();
            $("body").toggleClass("side-nav-close");
        })
    });
</script>

 

© 2010-2023 QZYcodes by Quazerty.