使導航菜單響應

從不同的屏幕尺寸查看我的網站時，菜單離開屏幕。如何使其響應？這裏是鏈接到site我已經添加了html和css供您參考。謝謝。使導航菜單響應

HTML

<div class="wrapper"> 
    <p class="menu"> 
    <a href="#" class="animBtn themeB hastip" title="<h2>Who We Are</h2>">Who We Are</a> 

    <a href="#" class="animBtn themeB hastip" title="<h2>What We Do</h2>"Loree Do</a> 

    <a href="/forum" class="animBtn themeB hastip" title="<h2>Step Into Our Community</h2>">Forum</a> 

    <a href="#" class="animBtn themeB">Contact US</a> 
    </p> 
</div>

CSS

.menu { 
    position: absolute; 
    top: 50%; 
    height: 300px; 
    margin-left: 950px; 
    margin-top: 10px; 
} 

a.animBtn:link, a.animBtn:visited { 
    position: relative; 
    display: block; 
    width: 220px; 
    margin: 10px auto 0; 
    border-radius: 10px; 
    font-size: 21px !important; 
    padding: 14px 15px; 
    border: 2px solid #608B82; 
    background: rgba(255, 255, 255, 0.15); 
    color: rgba(159,192,181,1); 
    text-align: center; 
    text-decoration: none; 
    text-transform: note; 
    overflow: hidden; 
    letter-spacing: .08em; 
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 
a.animBtn:link:after, a.animBtn:visited:after { 
    content: ""; 
    position: absolute; 
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1); 
    height: 0%; 
    left: 50%; 
    top: 50%; 
    width: 100%; 
    z-index: -1; 
    -webkit-transition: all .3s ease 0s; 
    -moz-transition: all .3s ease 0s; 
    -o-transition: all .3s ease 0s; 
    transition: all .3s ease 0s; 
} 
a.animBtn:link:hover, a.animBtn:visited:hover { 
    color: rgba(159,192,181,1); 
    text-shadow: none; 
} 
a.animBtn:link:hover:after, a.animBtn:visited:hover:after { 
    height: 420%; 
} 

a.animBtn.themeB:after { 
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); 
    transform: translateX(-50%) translateY(-50%) rotate(45deg); 
}

來源

2015-09-06 WhadeJ

如果可能，請添加您的代碼。 – CodeRomeos

你的意思是css？ – WhadeJ

是的HTML部分。 – CodeRomeos

好的。開始了。下面的代碼僅適用於手機和屏幕比手機大。但是對於在每個標準設備中工作的流體佈局，您可能需要爲所有標準設備應用媒體屏幕。

下面是HTML

<p class="menu"> 
<a href="#" class="animBtn themeB hastip" title="">Who We Are</a> 

<a href="#" class="animBtn themeB hastip" title="">What We Do</a> 

<a href="/forum" class="animBtn themeB hastip" title="">Forum</a> 

<a href="#" class="animBtn themeB">Contact US</a> 
</p>

CSS

@media screen and (max-width:320px){ /*For Mobile*/ 
.menu { 
position: absolute; 
top: 50%; 
height: 300px; 
margin:auto; 
margin-top: 10px; 
} 

@media screen and (min-width:321px){ /* for screen larger than mobile*/ 
.menu { 
position: absolute; 
top: 50%; 
height: 300px; 
margin-left: 70%; 
margin-top: 10px; 
} 
}

定製根據自己的需要對每個畫面的位置。這裏是DEMO如果有任何問題，請回來。希望這對你有所幫助。

來源

2015-09-06 15:45:56 CodeRomeos

工作就像一個魅力！謝謝！！ – WhadeJ

有不止一個解決這個問題。在你的情況下，你可能想嘗試使用CSS3 media rules。

如果我們看一下你的CSS的菜單：

.menu { 
    position: absolute; 
    top: 50%; 
    height: 300px; 
    margin-left: 950px; 
    margin-top: 10px; 
}

的保證金左是推動你的菜單了較小的屏幕。所以對於較小的屏幕，您需要較小的餘量。您可以通過附加下面的規則你的CSS代碼中設置這樣的：

@media all and (max-width: 600px) { 
    .menu { 
     margin-left: 250px; 
    } 
}

如果瀏覽器檢測到屏幕尺寸小於600px的小這將覆蓋你的菜單樣式。

我看到W3schools也提供一些其他解決方案over here。

來源

2015-09-06 15:41:01 Marten

使導航菜單響應

回答

相關問題