我的菜单目前如何: what it looks like now 我想要的是: What i want 当我调整窗口屏幕的大小并且菜单按钮/链接开始移动到另一行时,我添加了一个媒体查询,使其全部在一个按钮中。单击该按钮时,将显示所有菜单选项。我需要帮助来确定令人敬畏的图标和网站链接,以便它不会占用那么多空间。
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
html,
body {
margin: 0;
padding: 0;
}
.topnav {
text-align: center;
overflow: hidden;
background-color: #63757a;
position: fixed;
width: 100%;
z-index: 10000;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 20px 20px;
}
.topnav a:hover {
opacity: 0.699999988079071044921875;
color: black;
text-decoration: underline;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width:1300px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width:1300px) {
.topnav.responsive {
position: fixed;
z-index: 1000000;
height: 100%;
overflow: scroll;
width: 100%;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="topnav" id="myTopnav">
<a href="https://www.havardpettersen.life/index.html" title="hjem">Home</a>
<a href="https://www.havardpettersen.life/media.html" title="Media">Media</a>
<a href="https://www.havardpettersen.life/gallery.html" title="Bilder">Bilder</a>
<a href="https://www.havardpettersen.life/trening.html" title="trening">Trening</a>
<a href="https://www.havardpettersen.life/kontakt.html" title="kontakt meg">Kontakt meg</a>
<a href="https://www.havardpettersen.life/registration.php" title="registrer deg">Registrer deg</a>
<a href="https://www.havardpettersen.life/login.php" title="login her">Logg inn</a>
<a href="https://www.havardpettersen.life/dashboard.php" title="ditt dashboard">Dashboard</a>
<a href="https://www.havardpettersen.life/skole.html" title="se skole siden min">Skole</a>
<a href="https://calendar.google.com/calendar/embed?src=therealsirwerty%40gmail.com&ctz=Europe%2FOslo" title="åpne kalender på ny side">Kalender</a>
<a href="https://www.facebook.com/sirwerty" title="facebook" class="fa fa-facebook"></a>
<a href="https://twitter.com/hvardpettersen1" title="twitter" class="fa fa-twitter"></a>
<a href="https://www.youtube.com/user/oldwildybck" title="youtube" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/realsirwerty/" title="instagram" class="fa fa-instagram"></a>
<a href="https://www.snapchat.com/add/havard.boy" title="snapchat" class="fa fa-snapchat-ghost"></a>
<a href="https://www.reddit.com/user/Sir_Werty/" title="reddit" class="fa fa-reddit"></a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
答案 0 :(得分:1)
如果您希望连续使用唯一的图标,请尝试使用此css
.topnav.responsive a[class*=fa] {
display: inline-block;
}
它将定位所有类名称包含fa
子字符串
Stack Snippet
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
html,
body {
margin: 0;
padding: 0;
}
.topnav {
text-align: center;
overflow: hidden;
background-color: #63757a;
position: fixed;
width: 100%;
z-index: 10000;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 20px 20px;
}
.topnav a:hover {
opacity: 0.699999988079071044921875;
color: black;
text-decoration: underline;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width:1300px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav.responsive a[class*=fa] {
display: inline-block;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width:1300px) {
.topnav.responsive {
position: fixed;
z-index: 1000000;
height: 100%;
overflow: scroll;
width: 100%;
text-align: left;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="topnav" id="myTopnav">
<a href="https://www.havardpettersen.life/index.html" title="hjem">Home</a>
<a href="https://www.havardpettersen.life/media.html" title="Media">Media</a>
<a href="https://www.havardpettersen.life/gallery.html" title="Bilder">Bilder</a>
<a href="https://www.havardpettersen.life/trening.html" title="trening">Trening</a>
<a href="https://www.havardpettersen.life/kontakt.html" title="kontakt meg">Kontakt meg</a>
<a href="https://www.havardpettersen.life/registration.php" title="registrer deg">Registrer deg</a>
<a href="https://www.havardpettersen.life/login.php" title="login her">Logg inn</a>
<a href="https://www.havardpettersen.life/dashboard.php" title="ditt dashboard">Dashboard</a>
<a href="https://www.havardpettersen.life/skole.html" title="se skole siden min">Skole</a>
<a href="https://calendar.google.com/calendar/embed?src=therealsirwerty%40gmail.com&ctz=Europe%2FOslo" title="åpne kalender på ny side">Kalender</a>
<a href="https://www.facebook.com/sirwerty" title="facebook" class="fa fa-facebook"></a>
<a href="https://twitter.com/hvardpettersen1" title="twitter" class="fa fa-twitter"></a>
<a href="https://www.youtube.com/user/oldwildybck" title="youtube" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/realsirwerty/" title="instagram" class="fa fa-instagram"></a>
<a href="https://www.snapchat.com/add/havard.boy" title="snapchat" class="fa fa-snapchat-ghost"></a>
<a href="https://www.reddit.com/user/Sir_Werty/" title="reddit" class="fa fa-reddit"></a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>