如何使無序列表導航移動友好

我想讓我的網站上的導航響應（並最終移動友好），但我不能讓它按我想要的方式工作。如何使無序列表導航移動友好

理想情況下，徽標將位於頂部，其他導航鏈接將在小於480像素的屏幕上堆疊（每行一個），但我現在要解決任何在移動屏幕上可讀的內容。

我已經看了很多不同的響應選項，但似乎沒有工作如何我的導航設置。

相關HTML：

<body> 
    <ul id="navmenu"> 
     <li><a href="http://prettylushrecords.storenvy.com/">STORE</a></li> 
     <li><a href="bands">BANDS</a></li> 
     <li><a href="releases.html">RELEASES</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
    </ul>

相關CSS：

#navmenu { 
    background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top; 
    position: relative; 
    margin: auto; 
    overflow: hidden; 
    padding: 0; 
    width: 100%; 
    } 

li, li + li + li + li { 
    display: block; 
    float: left; 
    height: 220x; 
    width: 200px; 
    margin: 0; 
    padding: .5em 1%; 
    text-align: center; 
    vertical-align: middle; 
    width: 18%; 
    } 

li + li + li { 
    margin-left: 20%; 
    padding: .5em 0; 
    } 

li { 
    font-size: 2.5em; 
    color: #000; 
    line-height: 220px; 
    font-family: Courier, monospace; 
    font-weight: bold; 
    color: #bdb0b0; 
    } 

@media only screen and (max-device-width: 480px) { 

#navmenu { 
    background: url(http://prettylushrecords.comoj.com/prettylushlogosmall.png) no-repeat center top; 
    position: relative; 
    margin: auto; 
    overflow: hidden; 
    padding: 0; 
    width: 100%; 
    } 

li { 
    font-size: 1em; 
    color: #000; 
    line-height: 100px; 
    font-family: Courier, monospace; 
    font-weight: bold; 
    color: #bdb0b0; 
    }

來源

2013-12-09 user3054531

來吧，試試這個http://tinynav.viljamis.com/

這是做什麼的

....轉換並導航至小屏幕的選擇下拉菜單。它還會自動選擇當前頁面，併爲該項目添加selected =「selected」。

來源

2013-12-09 05:44:57 Gandalf

我真的會建議你用更簡潔的方式來構建你的html標籤。

<nav> 
    <ul> 
    <li>asdfad</li> 
    <li><div><img src="yourimage"/></div></li> 
    <li>asdf</li> 
    <li>asdf</li> 
</ul> 
</nav>

CSS

DO NOT DO THIS李+李+李（你只需要一個立的風格所有LIS，並期待在CSS選擇器）試試這個：

li{ 
    display: block; 
    float: left; 
    height: 220x; 
    width: 200px; 
    margin: 0; 
    padding: .5em 1%; 
    text-align: center; 
    vertical-align: middle; 
    width: 18%; 
    } 

@media only screen and (max-device-width: 480px){ 
float: none; 
line-height: 5px; 
}

嘗試看看W3的規格和其他網站如何設置標題。總是使用檢查元素，他們如何設置和他們的CSS，它會幫助你。

來源

2013-12-09 05:56:03 ravi

謝謝您的建議@ravitadi。我試圖清理代碼，但現在遇到了橫向居中和拉伸全寬的導航問題。它現在只在左上角。這裏是一個小提琴來說明：jsfiddle.net/gB7td有什麼想法？ – user3054531

http://jsfiddle.net/gB7td/1/ – ravi

如何使無序列表導航移動友好

回答

相關問題