it-swarm.com.de

Erstellen eines Dropdown-Menüs bei Klick auf CSS

Ich muss ein Menü mit 5 Optionen erstellen. Wenn Sie auf eine bestimmte Option klicken, wird ein neues Untermenü angezeigt. Ich habe absolut keine Ahnung, wie das geht.

/**Navigation */

nav {
  border: 1px solid red;
  float: left;
  margin-right: 35px;
  min-height: 280px;
}

nav li {
  text-decoration: none;
  font-weight: normal;
  color: red;
  list-style: none;
}


/**Content */

#section {
  background-color: ;
  border: 1px solid;
  font: normal 12px Helvetica, Arial, sans-serif;
  margin-left: 180px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
<div class="clearfix"></div>
<nav>
  <ul>
    <li><a href="index.html" accesskey="1"> Home </a> </li>
    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>

    <ul>
      <li><a href="Commercial.html">Commercial</a> </li>
      <li><a href="Residential.html">Residential</a> </li>
      <li><a href="heritage.html">Heritage</a> </li>
      <li><a href="Rennovations.html">Rennovations</a> </li>
    </ul>

    <li><a href="services.html" accesskey="3"> Services </a> </li>
    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
  </ul>
</nav>

13
Brendan

CSS hat keinen Click-Handler. Aus diesem Grund ist es unmöglich, mit Standard-CSS zu arbeiten. Sie könnten etwas verwenden, das als Checkbox-Hack bezeichnet wird, aber meiner bescheidenen Meinung nach ist es etwas klobig und es wäre umständlich, innerhalb eines Navigationsmenüs zu arbeiten, wie es Ihr Anwendungsfall erfordert. Aus diesem Grund würde ich jQuery oder Javascript vorschlagen ... Hier ist eine recht einfache Lösung mit jQuery.

Grundsätzlich verbergen wir das Sub-Navi mit display: none; von Anfang an. Wenn Sie auf ".parent" klicken, wird mit jQuery eine Klasse ".visible" auf das Sub-Nav-Element (das verschachtelte UL) mit display: block; umgeschaltet, wodurch es angezeigt wird . Beim erneuten Klicken verschwindet es, wenn die Klasse entfernt wird.

Damit dies funktioniert, muss jeder verschachtelte <UL>, der ein "sub-nav" IST, die Klasse .sub-nav und sein übergeordnetes Element (der <LI>) MUSS die Klasse .parent haben. Da dies jQuery verwendet, müssen Sie auch eine jQuery-Bibliothek an Ihre Site anschließen. Sie können dies tun, indem Sie es selbst hosten und wie gewohnt verlinken, oder Sie können den Bibliotheksdienst von google verlinken (empfohlen). 

JSFiddle Demo

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});
#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li>Home</li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

10
Michael

Neben dem bereits erwähnten checkbox-Hack können Sie auch eine Schaltfläche als Menüelemente verwenden und den Status :focus verwenden, um das Dropdown-Menü anzuzeigen. Dies hat den Vorteil, dass das Menü geschlossen wird, wenn Sie außerhalb des Menüs klicken. Einige HTML-Elemente erhalten bei Klicks natürlich nicht den Fokus. Für diese können Sie das Attribut "tabindex" hinzufügen, um den Fokus zu erhalten. 

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}
<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

11
Stephan Muller

Natürlich komme ich zu spät, aber:

Du kannst einen CSS-Klick mit einem Hack auslösen !!

Mit einem Kontrollkästchen arbeiten !!

Probe:

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }
    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

Sie können Übergänge verwenden, um den Show-Hide-Effekt zu animieren:) Dies ist nur ein sehr einfaches Beispiel !!

Hinweis: Dies ist ein CSS3-Hack, wenn Sie eine Browser-Unterstützung für alte Browser benötigen, die nicht funktionieren. 

3
Steven Web

Tatsächlich gibt es eine Möglichkeit, dieses Verhalten mit reinem CSS- und Browser-Element-Verhalten unter Verwendung des Checkbox-Hacks zum Laufen zu bringen. Zum Zeitpunkt des Schreibens drückt es jedoch, was mit CSS getan werden sollte, im Vergleich zu dem, was mit CSS gemacht werden kann. Es kann auch ziemlich schrecklichen semantischen Code verursachen (immerhin gibt es einen Grund dafür, dass er normalerweise als Checkbox HACK bezeichnet wird). 

Sie könnten es jedoch verwenden, wenn Sie nur Anforderungen für moderne Browser haben, anderen nur eingeschränkte Funktionalität geben, und ich habe dies selbst in Produktionscode für ein isoliertes Chrome-Projekt verwendet, und es macht Spaß, damit zu spielen.

Hier ist ein Link, um mehr darüber zu erfahren:

http://css-tricks.com/the-checkbox-hack/

Aber noch einmal zu betonen, wie andere schon hier haben, sollte das Funktionsverhalten eigentlich über JavaScript erfolgen. Wenn Sie nicht wirklich eine Hover-basierte Menülösung wünschen, ist dies eine ganz andere Frage!

1
lee_gladding

 $('#open').on('click', function(e) {
   simple_showpopup("popup", e);
 });

 function simple_showpopup(id, evt) {
   var _pnl = $("#" + id);
   _pnl.show();
   _pnl.css({
     "left": evt.pageX - ($("#" + id).width() / 2),
     "top": (evt.pageY + 10)
   });

   $(document).on("mouseup", function(e) {
     var popup = $("#" + id);
     if (!popup.is(e.target) && popup.has(e.target).length == 0) {
       popup.hide();
       $(this).off(e);
     }
   });
 }

 $("#popup").hide();
.defa-context-panel {
  border: 1px solid black;
  position: absolute;
  min-width: 200px;
  min-height: 150px;
  background-color: #f8f8f8;
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>

<div id="popup" class="defa-context-panel">Content
  <div>DIV inside</div>
</div>

0
Godly Mathew

eine reine css-lösung für ihr problem sieht so aus

Demo: http://jsfiddle.net/HyGZf/1/

sie brauchen input und label und Sie müssen href aus dem Portfolio entfernen, wenn Sie nur css verwenden möchten.

sie können Übergang hinzufügen: alle 1s Easy-In-Out; zum Untermenü, wenn Sie möchten, dass es animiert wird

/**Navigation */
nav{
    border: 1px solid red ;
    float: left;
    margin-right:35px;
    min-height:280px;
    }


nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}   
/**Content */
#section{
    background-color: ;
    border: 1px solid;
    font: normal 12px Helvetica, Arial, sans-serif; 
    margin-left:180px;
 }



 .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;

}
#Portfolio:checked +ul ul#submenu{
 height:80px;   
}
#submenu{
    overflow:hidden;
    height:0px;
    margin:0;
}
a[accesskey="2"]{
    color:blue;
    cursor:pointer;
    text-decoration:underline;
}

das Markup

    <div class="clearfix"></div>
<nav>
    <input id="Portfolio" type="checkbox" name="menu" hidden>
    <ul>
        <li><a href="index.html" accesskey="1"> Home </a> </li>
        <li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>

        <ul id=submenu type="list">
              <li><a href="Commercial.html">Commercial</a> </li>
              <li><a href="Residential.html">Residential</a> </li>
              <li><a href="heritage.html">Heritage</a> </li>
              <li><a href="Rennovations.html">Rennovations</a> </li>
        </ul>

        <li><a href="services.html" accesskey="3"> Services </a> </li>
        <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
        <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
     </ul>
</nav>
0
Gildas.Tambo

Sie müssen dies tun, indem Sie Javascript verwenden und einen Click-Ereignishandler registrieren, um Ihre Aktion auszuführen.

Wenn Sie alles neu sind, sollten Sie nach einigen JavaScript-Tutorials suchen (verwenden Sie keine W3Schools, schauen Sie sich woanders um), und sehen Sie sich einige jQuery-Tutorials an, da jQuery solche Aufgaben vereinfacht.

0
BenM

Es gibt viele Frameworks, die Sie mit gut aussehenden Menüs für Ihre Bedürfnisse verwenden können, ganz zu schweigen davon, dass alle Geräte (Tablets, Telefone und PCs) unterstützt werden.

Im Twitter-Bootstrap-Framework zum Beispiel gibt es genau das, was Sie brauchen. Schauen Sie sich dieses Tutorial an: Twitter-Bootstrap - Navs

Lesen Sie die gesamte Nav-Sektion. Am Ende wird über Nav mit Dropdown-Optionen für weitere Optionen gesprochen. Das Menü des Tutorials selbst ist mit dem Twitter-Bootstrap-Framework erstellt.

0
Eran H.