1. ホーム
  2. 質問と答え
  3. [ページ1/2/3]私が示したように私のプロジェクトのメニュー項目にドロップダウン機能を追加しようとしている既存のNAV

[ページ1/2/3]私が示したように私のプロジェクトのメニュー項目にドロップダウン機能を追加しようとしている既存のNAV

2017-03-10 3 views
1

上のドロップダウン項目を追加しようとしています。これを行う効率的な方法はありますか？ （jQueryのソリューションは、該当する場合は歓迎されている）[ページ1/2/3]私が示したように私のプロジェクトのメニュー項目にドロップダウン機能を追加しようとしている既存のNAV

DEMO

<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>

1（プロジェクト要素がJSFiddleに延伸されたが、それはまだかかわらず、働く何らかの理由で）：

出典

2017-03-10 Jonathan Lawrence

答えて

0

ul ul { display: none; }とネストされたメニューを非表示とli:hover > ul { display: block; }で示さするネストされた/隠さul Sをトリガします。

.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>

出典

2017-03-10 01:42:38

+0

これは素晴らしい答えです。どうもありがとうございます！私は子要素の使用について完全に忘れていました。私はそれが混乱したIDの/クラスで動作するようにしようとしていました。とても有難い！ –

+0

@JonathanLawrence甘い、問題ありません！それがうれしい！ –

0 

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>

出典

2017-03-10 01:40:31

0

あなたは、最初のページのリスト.Hideドロップダウンを作成するためのいくつかのクラスを追加し、リンクを置くとblockにリンクが表示されるはずです。

<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; 
}

出典

2017-03-10 02:19:53

関連する問題

 関連する問題