使导航菜单响应

从不同的屏幕尺寸查看我的网站时，菜单离开屏幕。如何使其响应？这里是链接到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

使导航菜单响应

回答

相关问题