CSS-Dropdown-Menü

Lesezeit: 9 Minuten

Ich versuche, ein einfaches CSS-Dropdown-Menü zu erstellen, in dem das Untermenü angezeigt wird, wenn Sie mit der Maus über einen Link fahren. Ich habe es geschafft, dies zu erreichen, wenn Sie mit der Maus über ein li fahren, aber nicht herausfinden können, wie es mit einem Link geht.

Der Grund, warum ich versuche, dies mit einem Link und nicht mit dem li zu tun, ist, dass meine Menübreite 100% beträgt und das li einen größeren Bereich umfasst als der Link. Wenn Sie also mit der Maus über diesen Bereich fahren, erscheint das Untermenü, wenn Sie dies nicht tun will es nicht.

Mein CSS ist wie folgt:

.menu {
    border: solid 1px red;
    font-size: 5em;
    font-family: 'Raleway', arial, serif;
}

.menu ul {
}

.menu ul.children {
    display: none;
}

.menu ul li {
    margin: 20px 0 10px 0;
}

.menu ul li:hover ul.children {
    display: block;
    position: absolute;
}

.menu ul li a {
    padding: 10px 10px 0 40px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-decoration: none;
}

  • Es gibt Tausende von Tutorials für jede Art von Dropdown, nach links schieben, um alles im Web zu tun, und eine schnelle Suche nach SO würde Ihnen zeigen, dass bereits solide Lösungen veröffentlicht wurden. Du musst das Rad nicht jedes Mal neu erfinden…

    – easwee

    28. Juni ’11 um 12:50

  • Versuche dies csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu

    – Tröpfchen

    28. Juni ’11 um 12:53

  • “Son of Suckerfish” ist ein weiterer solider Ausgangspunkt: htmldog.com/articles/suckerfish/dropdowns

    – Brent

    28. Juni ’11 um 14:34

CSS Dropdown Menu
Spycho

Ich würde es nach Möglichkeit vermeiden, JS dafür zu verwenden. Es ist nicht nötig. Stecken Sie einfach ein div in Ihr Li (mit etwas weniger Polsterung als das Li selbst) und stylen Sie es div:hover zu display:block;.

Hier ist eine Geige den Ansatz demonstrieren. Es ist ähnlich wie das, was Sie bereits haben.

  • Wenn Ihre Maus draußen ist, verschwindet sie, also ist das Menü jetzt weg. Können Sie bitte zeigen, wie Sie es bleiben lassen.

    – cppit

    23. Januar ’13 bei 1:48

CSS Dropdown Menu
Dirk van Bergen

Einfach ausgedrückt ist dies nicht etwas, was Sie in CSS als verschachteltes tun können <ul> ist in der <li> und nicht die <a> (Oder das gesamte Untermenü wäre ein Link und das ist einfach albern)

Das kannst du mit Javascript/jquery umgehen

$('.menu ul li a').hover(function() {
    $(this).parent().children('ul').toggle();
});


<!doctype html>
<html lang=''>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://stackoverflow.com/questions/6506571/styles.css">
   <script src="http://webdesign9.in/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().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').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 900;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);
    </script>
   <title>WELCOME TO WEBDESIGN9.IN</title>
   <style>
   #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#EEE;}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:900px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
   </style>
</head>
<body>

<header>
<nav id='cssmenu'>
<div class="logo"><a href="index.php">Responsive </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PRODUCTS</a>
   <ul>
      <li><a href="#">Product 1</a>
         <ul>
            <li><a href="#">Sub Product</a></li>
            <li><a href="#">Sub Product</a></li>
         </ul>
      </li>
      <li><a href="#">Product 2</a>
         <ul>
            <li><a href="#">Sub Product</a></li>
            <li><a href="#">Sub Product</a></li>
         </ul>
      </li>
   </ul>
</li>
<li><a href="#">BIO</a></li>
<li><a href="#">VIDEO</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
</body>
<html>

  • (1) Obwohl dieser Codeblock die Frage beantwortet, wäre es am besten, wenn Sie eine kleine Erklärung dafür geben könnten, warum dies der Fall ist. (2) Sie sollten Ihre Flags verwenden, um diese Frage als Duplikat einer anderen Frage zu markieren, bei der Sie genau dieselbe Antwort gepostet haben (1, 2, 3, 4). Wenn dies kein Duplikat ist, geben Sie benutzerdefinierte Antworten an und kopieren Sie sie nicht einfach auf mehrere Fragen.

    – Artjom B.

    2. Juli ’15 um 12:21

.

436830cookie-checkCSS-Dropdown-Menü

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy