響應下拉菜單定位

我正在爲客戶端創建一個網站，它包含一個通過jquery腳本加載的響應下拉菜單。代碼如下。響應下拉菜單定位

雖然我有一個問題。當我給容器div #menu一個位置：static;一切似乎都順利。但是，當我滾動並嘗試在頁面中途的某處（在當然是移動設備上）打開菜單時，它會在頁面頂部（在內容上方而不是內容上方）打開，因此我必須回滾到頂部看到它。

如果我給容器div #menu一個位置：fixed;菜單會加載內容，但是我無法在菜單中滾動，因此我無法滾動到最後一個菜單項。

誰能幫我一下嗎？

編輯：我不能發佈客戶端的網站（它在客戶端的開發區域，只有清除IP的訪問權限），但我使用幾乎相同的代碼this website。該網站有同樣的問題，所以你可以在那裏測試。

我希望這將有助於解決問題，我的客戶正在變得不耐煩......先謝謝了！

HTML：

<div id="menu"> 
<div class="menu-top-menu-container"> 
    <ul id="menu-top-menu" class="menu"> 
     <li><a href="#">menu item 1</a> 
     </li> 
     <li><a href="#">menu item 2</a> 
     </li> 
     <li><a href="#">menu item 3</a> 
     </li> 
    </ul> 
</div>

CSS

/* Responsive menu */ 
#menu { 
position: static; 
float: left; 
width: 98%; 
height: auto!important; 
margin: 110px 0 10px 0; 
padding: 0px 1% 0px 1%; 
line-height: 25px; 
background-color: #efefef; 
z-index: 99; 
} 
#menu li { 
display: list-item; 
list-style-type: none; 
} 
/* Menu items */ 
ul#menu-top-menu { 
float: left; 
top: 0px; 
left: 0px; 
width: 100%; 
max-width: 1000px; 
} 
/* Lijst menu items */ 
#menu #menu-icon { 
float: right; 
position: fixed; 
top: 53px; 
right: 22px; 
display: block; 
background: url(http://www.bobdewebbouwer.nl/2014bybob/wp-content/themes/2014bybob/foto/menu.png); 
background-repeat: no-repeat; 
height: 30px; 
width: 30px; 
margin: 0 0px 5px 5px; 
z-index: 999; 
} 
/* Menu icon tonen */ 
#menu #menu-top-menu { 
display: none; 
clear: both; 
} 
/* Menu verbergen tot er geklikt wordt op menu icon */ 
ul#menu-top-menu li { 
padding: 10px 0 10px 0; 
display: block; 
clear: both; 
text-align: left; 
width: 95%; 
} 
/* Menu items wat hoger maken */ 
ul#menu-top-menu li a { 
width: 100%; 
} 
ul#menu-top-menu li:hover ul { 
margin-top: 10px; 
}

jQuery的

jQuery(document).ready(function ($) { 

/* prepend menu icon */ 
$('#menu').prepend('<div id="menu-icon"></div>'); 

/* toggle nav */ 
$("#menu-icon").on("click", function() { 
    $("#menu-top-menu").slideToggle(); 
    $(this).toggleClass("active"); 
}); 

});

來源

2015-09-04 Bob the webbuilder

好像你刪除了該鏈接，請用正確的鏈接 –

編輯您的帖子如果你定位的子菜單，通常是父母應該有'position：relative'和submenu'position：absolute'。如果你在這裏做一個簡單的例子（使用SO的Stack Snippets），我們可能會幫助你。 –

感謝您的意見。我在我的文章中添加了代碼。 –

試試這個：

var _responsiveDropDown = function (selectors) { 

      $(document).on('click', selectors.dropDownSelector, function (e) { 
       var _menuHeight = $(selectors.menuSelector).height(), 
        _openTopLimit = _menuHeight; 

       if (selectors.isOpenTopSmallLimit) { 
        _openTopLimit = _openTopLimit/2; 
       } 
       var _distance = $(selectors.lowerlimitSelector).offset().top - $(this).offset().top - _openTopLimit; 

       if (_distance < _menuHeight) { 
        $(selectors.openedMenuSelector).css('top', -(_menuHeight + selectors.dropdownTopMargin) + 'px'); 
       } else { 
        $(selectors.menuSelector).css('top', ''); 
       } 
      }); 
     }

用法：

var dropDownSelectors = { 
          menuSelector: 'ul#menu-top-menu', 
          openedMenuSelector: '.open > #menu-top-menu', 
          dropdownTopMargin: 19, 
          isOpenTopSmallLimit: false 
         } 


responsiveDropDown(dropDownSelectors);

來源

2015-10-09 08:37:05

響應下拉菜單定位

回答

相關問題