web-dev-qa-db-ja.com

クリックCSSでドロップダウンメニューを作成する

5つのオプションを持つメニューを作成する必要があります。特定のオプションをクリックすると、新しいサブメニューが表示されます。これを行う方法はまったくわかりません。

/**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>
javascripthtmlcsshtml5css3
13
Brendan

CSSにはクリックハンドラがありません。このため、標準のCSSを使用することはできません。チェックボックスハックと呼ばれるものを使用することもできますが、私の謙虚な意見では、少し不格好であり、ユースケースが必要とするようなナビゲーションメニュー内での作業には不便です。このため、jQueryまたはJavascriptをお勧めします... jQueryを使用した簡単なソリューションを次に示します。

基本的に、display: none;を使用してサブナビゲーションを最初から非表示にします。その後、jQueryを使用して、「。parent」をクリックすると、クラス「.visible」をdisplay: block;でサブnav要素（ネストされたUL）に切り替えます。もう一度クリックすると、クラスが削除されると消えます。

これが機能するためには、ネストされたすべての<UL>が「サブnav」[〜＃〜] must [〜＃〜]であり、.sub-navクラスを持ち、その親要素であることに注意してください。 （<LI>）[〜＃〜] must [〜＃〜]には.parentクラスが必要です。また、これはjQueryを使用するため、jQueryライブラリをサイトに接続する必要があります。これを自分でホストし、通常どおりにリンクするか、または googleのライブラリサービス （推奨）からリンクすることにより、これを行うことができます。

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

既に説明したcheckboxハックに加えて、メニュー項目としてボタンを使用し、:focus状態でドロップダウンメニューを表示します。これに対する利点は、メニューの外側をクリックするとメニューが閉じることです。一部のHTML要素は、クリック時に自然にフォーカスを受け取りません。それらの場合、「tabindex」属性を追加して、フォーカスを取得できます。

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

もちろん遅れましたが：

ハックを使用してcssクリックをトリガーできます!!

チェックボックスを使用してください!!

サンプル：

      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>

トランジションを使用してショーのアニメーション効果を隠すことができます:)これは非常に単純な例です!!

言及：これはCSS3のハックで、古いブラウザーのブラウザーサポートが必要な場合、これは機能しません。

3
Steven Web

実際、チェックボックスハックを使用して、これを純粋なCSSとブラウザ要素の動作で動作させる可能性がありますが、これを書いている時点では、CSSで行うべきこととCSSで行うべきことを推進しています。また、かなりひどいセマンティックコードが発生する可能性があります（通常、チェックボックス[〜＃〜] hack [〜＃〜]）。

そうは言っても、最新のブラウザーの要件のみがあり、他のユーザーに制限された機能を提供する場合に使用できます。私はこれを本番コードで、孤立したchromeのみのプロジェクトで使用しています遊ぶのはかなり楽しい。

詳細はこちらのリンクをご覧ください。

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

しかし、他の人がすでにここで述べているように、機能的な振る舞いは本当にJavaScriptを介して行われるべきだと強調します。ホバーベースのメニューソリューションが実際に必要な場合を除き、それはすべて異なる質問です！

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

問題の純粋なCSSソリューションは次のようになります

デモ： http://jsfiddle.net/HyGZf/1/

inputとlabelが必要で、ポートフォリオのhrefを削除する必要がありますcssのみを使用する場合

transition：all 1s ease-in-out;をsubmenuに追加してアニメーション化することができます

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

マークアップ

    <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

これを行うには、JavaScriptを使用し、クリックイベントハンドラーを登録してアクションを実行する必要があります。

すべてに慣れていない場合は、いくつかのjavascriptチュートリアル（W3Schoolsを使用しないで、他の場所を参照）を探し、jQueryがこれらのタスクを簡素化するjQueryチュートリアルを確認する必要があります。

0
BenM

すべてのデバイス（タブレット、電話、PC）をサポートすることは言うまでもなく、ニーズに合わせて見栄えの良いメニューで使用できる多くのフレームワークがあります。

例えば、Twitter bootstrapフレームワークでは、まさに必要なものがあります。このチュートリアルを確認してください。 Twitter bootstrap-Navs

Navセクション全体を読んで、最後にオプションについてのドロップダウン付きNavについて説明します。チュートリアル自体のメニューは、Twitter bootstrapフレームワークで構築されています。

0
Eran H.