如何使html菜單在手機上變得快速響應？

-2

如何解決我對菜單的響應式視圖？

這是小提琴中的代碼示例。

<div class="menu"> 
<ul id="sf-menu">   
    <li class="current"> 
     <a href="#" id="menu_admin_viewAdminModule" class="firstLevelMenu"> 
      <b>Dashboard</b> 
     </a> 
    </li> 
    <li> 
     <span id="separator_level1"><b> | </b> </span> 
    </li>   `enter code here` 
    <li> 
     <a href="#" id="menu_pim_viewPimModule" class="firstLevelMenu"> 
      <b>New Service</b> 
     </a> 
    </li> 
    <li> 
     <span id="separator_level1"><b> | </b> </span> 
    </li>  
</div>

來源

2014-11-03 user3555326

你有檢查自舉嗎？ http://getbootstrap.com/ – 2014-11-03 07:29:13

你可以使用Bootstrap或jQuery手機:) – 2014-11-03 07:29:28

我檢查過bootstrap，但我不太熟悉它 – user3555326 2014-11-03 07:34:16

添加這是你的CSS：

@media screen and (max-width: 480px) { 
    .menu{height: auto;} 
    .menu > ul > li > ul > li , .menu > ul , .menu > ul > li {float: none;margin: 0;} 
    .menu > ul > li > a{border-radius: 0;} 
    .menu > ul > li > ul > li:nth-child(even) , .menu > ul > li:nth-child(even){display: none;} 
    .menu > ul > li > ul{width: 100%;height: auto;;padding: 5px 0;} 
}

來源

2014-11-03 07:38:29

thx與此我設法使主菜單變得敏感，但是，但子菜單將成爲重疊而不是將菜單推到底部 – user3555326 2014-11-03 07:45:17

刪除'位置：絕對'。 – 2014-11-03 08:43:18

以前已經嘗試過，我沒有刪除它，因爲菜單會拖下來，但事件沒有選擇菜單，並且在桌面視圖中也起作用 – user3555326 2014-11-03 09:25:22

好友，請記住下面的東西，不僅可以顯示在手機導航（菜單），無論元素完美地坐在移動，你應該記住下面的東西。

1）您的網站應該重點在移動第一基礎上應用樣式
2）然後，您的樣式應完美設置，考慮到移動設備寬度。

第1步：
顯示移動第一個佈局僅僅是爲了避免更多的http請求！
只需添加下面一行的頭部

<meta name="viewport" content="width=device-width, initial-scale=1">

這將使手機顯示頁面的總寬度。

Please check here for more details

注：這將使我們的造型導航（菜單）的移動更容易。

步驟2：
'之後步驟-1'，你應該加載完美樣式表來顯示導航在移動完美，則應該使用

@media (query) { 
    /* CSS Rules used when query matches */ 
}

例

@media (min-width: 500px) and (max-width: 600px) { 
(This tells us to apply style when viewport width falls between 500px & 600px) 
      h1 { 
       color: fuchsia; 
      } 
    }

請通過以下鏈接進一步指導&採用專門針對手機的菜單導航。

Simple Mobile navigation
Mobile menu design guide
Some menu designs to tweak in

免責聲明：的答案需要更多的解釋，我指導你的鏈接，如果你有任何問題，請在這裏放下一個！我們會幫忙！

來源

2014-11-03 08:05:16 YaswanthJg

如何使html菜單在手機上變得快速響應？

回答

相關問題