3

600px幅の狭いデバイスで表示すると、ドロップダウンのマルチレベル ナビゲーションを使用するレスポンシブ デザインがあります。に設定されているヘッダー内にネストされていposition: fixedます。問題は、メニューをドロップダウンすると、メニューが下にオーバーフローしてスクロールしない (ヘッダーが固定されているため) ため、タブが表示されないことです。(Javascript、jQuery、または PHP を使用して) 動的に設定して、ドロップダウン メニュー (右上または左のハンバーガー メニュー アイコンをクリックする方法) でヘッダーの位置を からfixedに変更する方法はありrelativeますか?

良い例は、www.dribbble.com です。幅が800px狭い場合、ヘッダーは粘着性があります ( fixed)。左上のメニューをクリックすると、ヘッダーの位置が自動的に に変更されrelativeます。

HTML

    <header role="banner" class="secondary">
    <a href="#menu" class="menu-toggle"><em>Menu</em> <span aria-hidden="true"></span></a>
    <nav id="nav" role="navigation">
    <ul class="menu set">
    <li class="subnav">
    <a href="#">Link</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    </ul>
    </nav>
    </header>

CSS

header[role="banner"] {
    width: 100%;
    background: #fff;
    display: block;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 10000; 
}

@media all and (min-width: 500px) {
    header[role="banner"] {
        position: fixed;
        top: 0;
        left: 0;
        clear: both;
        height: auto;
        display: block;
    }
}

@media all and (max-width: 499px) {
    header[role="banner"] {
        position: fixed;
    }
}

JavaScript

    $(document).ready(function() {

$('body').addClass('js');
      var $menu = $('#nav'),
          $menulink = $('.menu-toggle'),
          $menuTrigger = $('.subnav > a');

$menulink.click(function(e) {
        e.preventDefault();
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
});

var add_toggle_links = function() {         
    if ($('.menu-toggle').is(":visible")){
        if ($(".toggle-link").length > 0){
        }
        else{
            $('.subnav > a').before('<span class="toggle-link">Open</span>');
            $('.toggle-link').click(function(e) {       
                var $this = $(this);
                $this.toggleClass('active').siblings('ul').toggleClass('active');
            }); 
        }
    }
    else{
        $('.toggle-link').empty();
    }
 }
add_toggle_links();
$(window).bind("resize", add_toggle_links); 

    });
4

1 に答える 1

1

そうですね、セレクターにカスタム ID やその他の種類の属性がある場合はposition、複数の方法で CSS プロパティを変更できます。

CSS3

@media all and (max-width: 800px) {
   header[role="banner"] {
      position: relative;
   }
}

jQuery

$(document).ready(function() {
    $('.menu-toggle').click(function() {
       if ($( document ).width() < 499)
          $('header[role="banner"]').css('position', 'relative');
       else
          $('header[role="banner"]').css('position', 'fixed');
    });
});

注:投稿を編集しました。position: fixed;両方の CSS@mediaルールで使用していることに気付きましたか? 秒を に変更しposition: relative;ます。

于 2013-09-28T22:34:33.627 に答える