Versuchen, ein Dropdown-Element auf vorhandenen nav hinzuzufügen

Ich versuche, eine Dropdown-Funktion zu meinem Projekt Menüelement wie gezeigt [Seite 1/2/3] hinzufügen. Gibt es einen effizienten Weg, dies zu tun? (JQuery Lösungen sind willkommen, wenn anwendbar)Versuchen, ein Dropdown-Element auf vorhandenen nav hinzuzufügen

DEMO

(aus irgendeinem Grund die Projekte Element in JSFiddle gestreckt wird, aber es funktioniert immer noch unabhängig)

<html> 
<header id="header"> 
    <div class="container"> 
    <img src="<!--logo-->"/> 
    <nav id="nav"> 
    <ul> 
    <li> 
     <a href="portfolio.html">Portfolio</a> 
    </li> 
    <li><a href="#">Projects</a> 
     <ul> 
     <li><a href="page1.html">Page 1</a></li> 
     <li><a href="page2.html">Page 2</a></li> 
     <li><a href="page3.html">Page 3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="contact.html">Contact</a> 
    </li> 
    </ul> 
    </nav> 
    </div> 
</header> 
</html>

Quelle

2017-03-10 Jonathan Lawrence

ausblenden die verschachtelten Menüs mit ul ul { display: none; } und lösen die versteckt/verschachtelte ul s mit li:hover > ul { display: block; } gezeigt werden.

.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 94%; 
 
    max-width: 1100px; 
 
    font-family: helvetica, sans-serif; 
 
} 
 

 
#nav { 
 
    position: absolute; 
 
    right: 0; 
 
    top: -15px; 
 
    height: 60px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
#nav ul li { 
 
    float: left; 
 
    list-style: none; 
 
} 
 

 
#nav ul li a { 
 
    display: block; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 0 10px; 
 
} 
 

 
#header { 
 
    z-index: 2; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    background: #222; 
 
    color: white; 
 
} 
 

 
#header img { 
 
    width: 180px; 
 
    height: 60px; 
 
} 
 

 
#header h1 { 
 
    top: 0px; 
 
    margin: 0px; 
 
    font-size: 1.75em; 
 
} 
 

 

 
/* unvisited link */ 
 

 
a:link { 
 
    color: blue; 
 
} 
 

 

 
/* visited link */ 
 

 
a:visited { 
 
    color: purple; 
 
} 
 

 

 
/* mouse over link - Nav*/ 
 

 
#nav a:hover { 
 
    color: black; 
 
    background-color: gold; 
 
} 
 

 

 
/* mouse over link - regular*/ 
 

 
.back a:hover { 
 
    color: blue; 
 
} 
 

 

 
/* selected link */ 
 

 
a:active { 
 
    color: blue; 
 
} 
 

 
ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #222; 
 
    padding: 0; 
 
} 
 

 
#nav ul ul li { 
 
    float: none; 
 
} 
 

 
li:hover > ul { 
 
    display: block; 
 
}

<header id="header"> 
 
    <div class="container"> 
 
    <img src="<!--logo-->" alt="logo placeholder" /> 
 
    <nav id="nav"> 
 
     <ul> 
 
     <li> 
 
      <a href="portfolio.html">Portfolio</a> 
 
     </li> 
 
     <li><a href="#">Projects</a> 
 
      <ul> 
 
      <li><a href="page1.html">Page 1</a> 
 
       <li><a href="page2.html">Page 2</a></li> 
 
       <li><a href="page3.html">Page 3</a></li> 
 
      </ul> 
 
      </li> 
 
      <li> 
 
      <a href="contact.html">Contact</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

Quelle

2017-03-10 01:42:38

Dies ist eine erstaunliche Antwort. Ich danke dir sehr! Ich hatte völlig vergessen, die Kinderelemente zu benutzen. Ich hatte versucht, es mit IDs/Klassen arbeiten zu lassen, was ein Durcheinander war. Sehr geschätzt! –

@ JonathanLawrence süß, kein Problem! froh, dass es geholfen hat! –

-1

Hast du dafür Bootstrap benutzt? Wenn ja, dann bitte unten stehenden Link.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

Quelle

2017-03-10 01:37:25 vishalgelani

ul{width:100%} 
 
li{height:0;overflow:hidden;background:#888;transition:.2s.4s} 
 
ul:hover li{height:20px}

<ul>Hover me 
 
<li><a href="page1.html">Page 1</a></li> 
 
<li><a href="page2.html">Page 2</a></li> 
 
<li><a href="page3.html">Page 3</a></li> 
 
</ul>

Quelle

2017-03-10 01:40:31

Sie etwas Klasse zuerst für die Herstellung Dropdown .Hide die Seitenliste hinzufügen sollten und den Link in block wenn schweben den Link zeigen.

<li class="dropdown"><a href="#">Projects</a> 
<ul class="dropdown-menu"> 
<li><a href="page1.html">Page 1</a></li> 
<li><a href="page2.html">Page 2</a></li> 
<li><a href="page3.html">Page 3</a></li> 
</ul> 
</li>

CSS

.dropdown { 
    position : relative; 
    display : block; 
} 
.dropdown-menu { 
    display : none; 
    position: absolute; 
    background-color: black; 
    min-width: 90px; 
    padding: 12px 16px; 
    z-index: 1; 
} 
.dropdown:hover > .dropdown-menu { 
    display : block; 
}

Quelle

2017-03-10 02:19:53

Versuchen, ein Dropdown-Element auf vorhandenen nav hinzuzufügen

Antwort

Verwandte Themen