我试图通过仅使用CSS来使我的菜单折叠和展开。我只找到了这个解决方案,并查看了其他论坛帖子,仍然无法让它工作。任何帮助将不胜感激。
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #c3c3c3;
}
.logo {
float: left;
}
.imgfull {
width: 100%;
height: auto;
}
.nav {
float: right;
margin: -22px 57px 0 0;
}
.nav ul {
padding: 0;
margin: 25px 0 0 -15px;
}
.nav ul li {
display: inline;
margin: 0 0 0 25px;
}
.nav ul li a {
background-color: #c3c3c3;
color: #9a0000;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
}
.nav ul li a:hover {
background-color: #000000;
color: #ffffff;
}
.navlog {
float: right;
margin: 12px 50px 0 0;
}
.navlog ul {
list-style: none;
padding: 0;
margin: 0 0 0 0;
font-weight: bold;
text-align: center;
}
.navlog ul li {
display: block;
margin: 20px 0;
}
.navlog ul li a {
background-color: #9a0000;
color: #000000;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
}
.navlog ul li a:hover {
background-color: #000000;
color: #ffffff;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .nav {
display: block;
}
@media (max-width: 48.000em) {
.nav {
width: 100%;
margin: 0 0 0 50px;
}
.nav ul {
width: 100%;
font-weight: normal;
margin: auto;
position: static;
display: none;
}
.nav ul li {
width: 100%;
text-align: center;
margin: auto;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
.nav ul li,
li a {
width: 100%;
}
.show-menu {
display: block;
}
}
@media (max-width: 48.000em) {
.navlog {
width: 100%;
margin: 0 0 0 50px;
}
.navlog ul {
width: 100%;
font-weight: normal;
margin: 0 0 -35px 0;
}
.navlog ul li {
width: 100%;
text-align: center;
margin: auto;
}
.navlog ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.navlog ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
}
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button"/>
<div class="nav">
<ul class="show-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Application Process</a></li>
<li><a href="#">Rental Listings</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Tenant Information</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<br clear="both"/>
答案 0 :(得分:2)
答案 1 :(得分:1)
array = ["http://www.redmine.ca/", "http://red.redmine.ca", "https://black.redmine.ca/Pages/welcome.aspx", "http://webmail.redmine.ca", "https://blue.color.redmine.ca/groups"]