"twoeyes prototype"
Bootstrap 3.3.0 Snippet by twoeyesPhilapp

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"></a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <!-- Rechte Navigationsseite--> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a class="dropdown-toggle text-uppercase" data-toggle="dropdown">Mega - Dropdown<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 1</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 2</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 3</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 4</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 5</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 6</p> </a> </div> </li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a class="dropdown-toggle text-uppercase" data-toggle="dropdown">Mega - Dropdown<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 1</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 2</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 3</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 4</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 5</p> </a> </div> </li> </ul> </li> <li class="col-sm-4 "> <ul> <li> <!-- Image Links: over und normal --> <div class="menu-item row" onmouseover="setImage(this,'http://placehold.it/150/ffffff/cccc00')" onmouseout="setImage(this,'http://placehold.it/150/ffffff/000000')"> <a href="#"> <img class="col-xs-3 col-sm-8 col-sm-offset-2 img-responsive" src="http://placehold.it/150/ffffff/000000"> <p class="col-xs-9 col-sm-12 bold">Link 6</p> </a> </div> </li> </ul> </li> </ul> </li> <li><a href="#" class="nav-link text-uppercase">Normaler Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Normales Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle drop text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Multilevel Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle drop " data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.2]</a></li> <li> <a href="#" class="dropdown-toggle drop" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle drop" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.4]</a></li> <li><a href="#">Another action [Menu 1.4]</a></li> <li><a href="#">Something else here [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 1.4]</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </li> </ul> <!-- Rechte Navigationsseite--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle text-uppercase" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li><a href="#" class="text-uppercase nav-link">Link</a></li> </ul> </div><!-- /.nav-collapse --> </nav> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } /* Macht das Dropdown-Menu groß*/ .mega-dropdown { position: static !important; } /*Anpassung des toggle*/ .dropdown-toggle, .nav-link{ color:black !important; font-weight:bold; } .menu-item > a > p{ color:black; } .menu-item:hover > a > p{ color:#cccc00; } .menu-item:hover > a > img{ color:#cccc00; } /*Linkstyle Header*/ .open > a{ text-decoration: underline !important; background-color:transparent !important; /* funktioniert nur im Firefox*/ -moz-text-decoration-color: yellow !important; /* Code for Firefox */ text-decoration-color: yellow !important; } .bold{ font-weight:bold; } /* Styling des Navbar Toggles*/ .navbar-toggle{ background-color:#cccc00; } /* Styling des Navbar Toggles*/ .icon-bar{ background-color:white; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 5px; } @media (min-width: 768px ) { /* Ab Größe eines Tablets*/ .dropdown-toggle{ text-align:center; } .menu-item > a > p{ text-align:center; } } @media (max-width: 768px ) { .menu-item > a > p{ padding-top:1em; } }
/*$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });*/ function setImage(x,y){ $(x).find('a').find('img').attr('src', y); } $(document).ready(function() { $('.navbar a.drop').on('click', function(e) { var $el = $(this); var $parent = $(this).offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if(!$parent.parent().hasClass('nav')) { $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } $('.nav li.open').not($(this).parents("li")).removeClass("open"); return false; }); });

Related: See More


Questions / Comments: