0

念頭に置いていたメニューのjQueryトグルを作成しました。ナビゲーションの状態が何であるか、つまりナビゲーションが非表示の場合は下向き、メニューが開いている場合は上向きのHTML矢印を作成する方法を考えていました。

私のjQueryの知識は非常に基本的であり、これは私が本当に理解していないことです。

HTMLコード：

<div class="wrap">
  <nav class="site-nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </nav>

  <div class="site-nav-wrap">
    <div class="site-nav-toggle">
      &#x2193; menu &#x2191;
    </div>
  </div>

  <header>
    <h1>Header title</h1>
  </header>

  <article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla vulputate lectus nec interdum. Praesent dapibus consectetur ante, vel pellentesque metus dapibus sed. Morbi urna tortor, mattis ornare interdum vitae, vehicula eget odio. In mi erat, pulvinar eu convallis non, aliquet eu neque.</p>
  </article>
</div>

CSSコード：

.wrap {
  margin: auto;
  width: 320px;
}
.site-nav {
  background: rgb(66,66,66);
  border-bottom: 2px solid rgb(55,55,55);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  display: block;
  float: left;
  margin: 0;
  padding: 0 10px 10px 10px;
  width: 100%;
}
.site-nav-wrap {
  height: 75px;
  float: left;
  overflow: hidden;
  width: 100%;
}
.site-nav-toggle {
  background-color: rgb(200,200,200);
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 150px;
  color: rgb(3,3,3);
  clear: both;
  cursor: pointer;
  display: block;
  height: 75px;
  line-height: 75px;
  margin: -20px auto 40px auto;
  text-align: center;
  transition: color .5s ease;
  width: 150px;
}
.site-nav-toggle:hover {
  background-color: rgb(3,3,3);
  color: rgb(200,200,200);
  transition: color .5s ease;
}
li { 
  margin-top: 10px;
}

Javascriptコード：

$(document).ready(function() {

  //Menu Open Seasame Action    
  $('.site-nav-toggle').click(function() {
      $('.site-nav').slideToggle();
  });

  //Hide site-nav content.    
  $(".site-nav").hide();
});

この例は、このjsFiddleで見ることができます：http：//jsfiddle.net/FsmhB/14/

4

1 に答える 1

0

矢印をスパンでラップし、デフォルトで上矢印を非表示にします。クリックイベントが発生すると、スパンスイッチの非表示/表示が切り替わります。

HTML

<div class="site-nav-wrap">
    <div class="site-nav-toggle">
        menu  <span>&#x2193;</span><span style="display: none;">&#x2191;</span>
    </div>
</div>

jQuery

$('.site-nav-toggle').click(function() {
    $('.site-nav').slideToggle();
    $(this).find('span:hidden').show().siblings().hide();
});

フィドル： http： //jsfiddle.net/iambriansreed/FsmhB/21/

于 2012-07-06T14:57:27.297 に答える