響應式菜單：垂直較小但水平較大的屏幕上

-1

在響應式網站上，我想在較小的屏幕上顯示垂直菜單，並在較大的屏幕上顯示水平菜單。目前，下面的HTML和CSS代碼不會在較小的屏幕上顯示垂直菜單。任何人都可以修改/改進此代碼嗎？提前致謝。響應式菜單：垂直較小但水平較大的屏幕上

#menu { 
 
\t width: 100%; 
 
\t min-height: 40px; 
 
\t position: relative; 
 
\t background-color: rgb(52, 85, 154); 
 
} 
 
#menu a { 
 
\t display: inline-block; 
 
\t padding: 10px 4% 0px 4%; 
 
\t font: 400 16px/32px 'Courier', sans-serif; 
 
\t min-height: 40px; 
 
\t color:white; 
 
\t text-decoration: none; 
 
\t font-weight:bold; 
 
\t transition: .5s; 
 
} 
 
#menu a:hover { 
 
\t color: red; 
 
\t background-color: blue; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
#menu { 
 
\t max-width: 100%; 
 
} 
 
} 
 

 
@media screen and (max-width:775px) { 
 
#menu a { 
 
\t max-width: 100%; 
 
\t padding: 0px 5px 0px 5px; 
 
\t float: none; 
 
\t text-align: center; 
 
} 
 
} 
 

 
@media screen and (max-width:980px) { 
 
#menu { 
 
\t max-width: 100%; 
 
} 
 
}

<body> 
 
<nav id="menu"> <a href="index.html">Home</a> <a href="aboutus.html">About</a> <a href="services.html">Services</a> <a href="http://srjtax.blogspot.com/" rel="external" target="_blank">Blog</a> <a href="taxlinks.html">Links</a> <a href="faq.html">FAQ</a> <a href="contact.html">Contact</a> 
 
</nav> 
 
</body>

來源

2015-06-15 sjhawar

添加display: block;此處的聲明：

@media screen and (max-width:775px) { 
    #menu a { 
     max-width: 100%; 
     padding: 0px 5px 0px 5px; 
     float: none; 
     text-align: center; 
     display: block; 
    } 
}

來源

2015-06-15 20:32:40 alliuca

我只是說你的建議一致。有用！謝謝。現在，如何在較小的屏幕上顯示/隱藏功能，以便佔用這麼多空間的垂直菜單隱藏起來？ – sjhawar

你可以使用輸入複選框方法，如果你不必擔心IE8（這種情況下，你需要應用js polyfill來處理：checked選擇器）。我想你想要這樣的：https://jsfiddle.net/yhcj9dsd/ – alliuca

請詳細寫下代碼（jsfiddle.net/yhcj9dsd - allienato），這樣我就可以試試。謝謝。 – sjhawar

當創建一個負責任的網站，主要的導航通常是因爲經常需要垂直顯示的項目中最棘手的（並在一個漢堡包下拉/飛出）在手機屏幕上，然後水平放在桌面屏幕上

第一步是使用移動第一種方法進行開發。這意味着：

款式應有盡有，使它看起來在小屏幕上好的
使用媒體查詢，逐步風格更大的屏幕尺寸

下面是如何風格菜單，以便基本片段它在一個小屏幕上垂直顯示，在大屏幕中水平顯示。

/* Mobile style first */ 
.menu { 
    text-align: center; 
} 
.menu a { 
    display: block; 
    padding: 10px; 
} 
.menu a:hover { 
    background-color: #eee; 
} 

/* Desktop style after */ 
@media (min-width: 600px) { 
    .menu a { 
     display: inline-block; 
    } 
}

一個例子來看看這個jsFiddle

來源

2015-06-15 20:33:42 Jackson

你可以試試下面的代碼片段

HTML 只需添加右側的導航標籤

<span id='trigger'> Menu </span>

CSS

以上的跨度標籤

在最初的菜單中ag定義將顯示從內嵌塊更改爲塊並將浮點設置爲左側。然後把以下內容：

#trigger { 
display: none; 
} 

@media screen and (max-width: 560px /* just as an example*/) { 
#trigger { 
    display: block; 
} 

#menu { 
    display: none; 
} 

div.expand { 
    display: block; 
} 

#menu a { 
    float: none; 
    border-bottom: 1px solid; 
} 
}

的Javascript

jQuery("#trigger").click(function() { 

    jQuery("#menu").slideToggle(500, function() { 
     jQuery(this).toggleClass("expand").css('display','500'); 
    }); 

});

我希望這有助於

來源

2015-06-15 21:32:58 abm

響應式菜單：垂直較小但水平較大的屏幕上

回答

相關問題