mair mair demo

demo todo

by felicis

HTML

<div id="jquery-script-menu">
<div class="jquery-script-center">
<a class="linkz" href="https://www.mair-mair.com">Mair Mair Weinhandel in Südtirol</a>
<div class="jquery-script-ads"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 class="site-title" style="margin-top:150px;">Menu Mair Mair Weinhandel Demo
<header id="top" class="wide-layout">
<div id="header-wrapper">
<div class="container">
<nav class="top-bar" style="height: 100px;">
<ul class="title-area">
<li class="name"> <a href="#" title="" rel="home"> <img alt="" src="" style="position: absolute; top: 0px; left: 0px; height: 36px; margin-top: 24.5px; margin-bottom: 24.5px; display: inline-block;"> </a> </li>
<li class="toggle-topbar"><a href="#" class="left-off-canvas-toggle">Menu</a></li>
</ul>
<section class="top-bar-section">
<ul id="menu-main-menu-1" class="right">
<li class="has-dropdown" style="color:black;"><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Home Portfolio</a></li>
<li><a href="#">Home Blog</a></li>
<li><a href="#">Home Services</a></li>
</ul>
</li>
<li class="megamenu has-dropdown"><a href="#">Services</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Web Design</a>
<ul class="dropdown">
<li><a href="#">Digital Web Design</a></li>
<li><a href="#">Website Sliders</a></li>
<li><a href="#">Multiple Sliders</a></li>
<li><a href="#">Full Screen Website</a></li>
<li><a href="#">One Page Site</a></li>
<li><a href="#">Parallax Website</a></li>
</ul>
</li>
<li class="has-children has-dropdown"><a href="features/#">Layouts</a>
<ul class="dropdown">
<li><a href="#">Headers Footers</a></li>
<li><a href="#">Ultra Responsive</a></li>
<li><a href="#">Tons of Layouts</a></li>
<li><a href="#">Page Builder</a></li>
<li><a href="#">Many Availabe Icons</a></li>
<li><a href="#">Visual...

CSS

/* ----------------------------------------
  1. Browser Resets
----------------------------------------*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
input:focus {
outline: none;
}
html {
overflow-x: hidden;
max-width: 100%;
}
body {
max-width: 100%;
padding: 0;
margin: 0;
cursor: default;
overflow-x: hidden;
}
ol, ul {
list-style: none;
}
/* ----------------------------------------
  2. Global Styles
----------------------------------------*/


body {
font-size: 13px;
background: #f5f5f5;
color: #222222;
font-family: "Lato", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 22px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.site-title {
text-align: center;
font-family: Lato;
margin-top: 50px;
font-size: 36px;
color: #888;
text-shadow: 1px 1px 1px #949494;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.container {
width: 90%;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
.alignleft {
float: left;
margin: 5px 18px 20px 0;
}
.alignright {
float: right;
margin: 5px 0 20px 18px;
}
/* Default Link Styles */
a {
color: #949494;
text-decoration: none;
line-height: inherit;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
a:hover, a:focus {
color: #666;
}
a img {
border:...

JavaScript

(function() {

  //duplicate hover state for parent menu when dropdown.
  (jQuery)('#header-wrapper ul.dropdown').hover(function() {
    $(this).parent().find('> a').addClass('expanded-menu');
  }, function() {
    $(this).parent().find('> a').removeClass('expanded-menu');
  });

  //mega menu position
  (jQuery).fn.megamenu = function(width) {
    var $that = (jQuery)(this),
      $window = (jQuery)(window);

    function update() {
      $that.find('.megamenu').each(function() {
        var $this = (jQuery)(this),
          windowW = $window.width(),
          offSetLeft = $this.offset().left,
          parentWidth = $this.width(),
          megaMenuCols = $this.find('> .dropdown > li.has-dropdown').length,
          megaMenuWidth,
          mainMenuWidth = $('#top .top-bar').width(),
          dropdownWidth = 295,
          longestMenu = 1;

        //fill in empty blanks if not equal length
        $this.find('> .dropdown > li.has-dropdown > .dropdown').each(function() {
          var currentLength = (jQuery)(this).find('> li').length;
          if (currentLength > longestMenu) {
            longestMenu = currentLength;
          }
        });

        $this.find('> .dropdown > li.has-dropdown > .dropdown').each(function() {
          var $dropdown = (jQuery)(this);
          var currentLength = $dropdown.find('> li').length;
          if (currentLength < longestMenu) {
            for (var i = 1; i <= longestMenu - currentLength; i++) {
              $dropdown.append('<li class="empty-megamenu"></li>');
            }
          }
        });

        dropdownWidth = mainMenuWidth / megaMenuCols;
        var megaMenuWidth = megaMenuCols * dropdownWidth > width ? width : mainMenuWidth,
          blankGutterW = windowW * 0.9 < width ? windowW * 0.05 : (windowW - width) / 2;

        //calculate default mega menu position - align in middle with parent item
        var megaMenuRight = megaMenuWidth / 2 - parentWidth / 2;

        //take care of mega menu position...