我有一个菜单,当您悬停它时,它会在下面显示一个箭头,但我希望它在您按下它时也显示该箭头。
这是codepen中的代码:https://codepen.io/ouchie/pen/gMMegZ
HTML
<div id="menu">
<ul>
<li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
<li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
<li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
<li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
<li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>
</ul>
</div>
这是我使用的CSS。这不是我做的,而是我在互联网上找到的
CSS
#menu {
position:relative;
list-style:none;
float:left;
width:800px;
height:60px;
text-align:center;
}
#menu li {
float:left;
text-decoration:none;
display:block;
font-family:Franklin Gothic Heavy, Gadget, sans-serif;
height:50px;
text-align:center;
line-height:50px;
}
#menu ul{
display:inline-block;
list-style-type: none;
}
#menu li a {
position:relative;
display:inline;
padding:11px 27px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-weight:bold;
color:#000;
border-bottom:7px solid #959393;
background:#979393;
background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
opacity:0.68;
}
#menu li:nth-child(2n-1) a:hover {
border-bottom-color:#FF0000;
}
#menu li:nth-child(2n) a:hover {
border-bottom-color:#FF0000;
}
#menu li:nth-child(2n-1) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}
#menu li:nth-child(2n) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}
#menu li a:hover {
color:#FF0000;
text-shadow:inset 0 0 8px 0 red;
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}
最佳答案
试试这个。它将适用于索引页。您必须为另一个页面稍微更改它。
HTML:
<div id="menu">
<ul>
<li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
<li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
<li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
<li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
<li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>
</ul>
</div>
CSS:
#menu {
position: relative;
list-style: none;
float: left;
width: 800px;
height: 60px;
text-align: center;
}
#menu li {
float: left;
text-decoration: none;
display: block;
font-family: Franklin Gothic Heavy, Gadget, sans-serif;
height: 50px;
text-align: center;
line-height: 50px;
}
#menu ul {
display: inline-block;
list-style-type: none;
}
#menu li a {
position: relative;
display: inline;
padding: 11px 27px;
overflow: hidden;
text-decoration: none;
text-align: center;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'DejaVu Sans Condensed', sans-serif;
text-transform: capitalize;
font-weight: bold;
color: #000;
border-bottom: 7px solid #959393;
background: #979393;
background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
opacity: 0.68;
}
#menu li:nth-child(2n-1) a:hover {
border-bottom-color: #FF0000;
}
#menu li:nth-child(2n) a:hover {
border-bottom-color: #FF0000;
}
#menu li:nth-child(2n-1) a:hover::before {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 11.5px solid transparent;
border-right: 11.5px solid transparent;
border-bottom: 11.5px solid #FF0000;
right: 45%;
bottom: 0;
}
#menu li:nth-child(2n) a:hover::before {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 11.5px solid transparent;
border-right: 11.5px solid transparent;
border-bottom: 11.5px solid #FF0000;
right: 45%;
bottom: 0;
}
#menu li a:hover {
color: #FF0000;
text-shadow: inset 0 0 8px 0 red;
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#menu li a.active {
color: #FF0000;
text-shadow: inset 0 0 8px 0 red;
-moz-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#menu li a.active {
border-bottom-color: #FF0000;
}
#menu li a.active::before {
position: absolute;
content: '';
width: 0;
height: 0;
border-left: 11.5px solid transparent;
border-right: 11.5px solid transparent;
border-bottom: 11.5px solid #FF0000;
right: 45%;
bottom: 0;
}
JavaScript(jQuery):
var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1);
console.log(page);
$('#menu ul li a').each(function() {
if($(this).attr('href') == page) {
alert('hi');
$(this).addClass('active');
}
});
关于html - 制作一个事件菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37859888/