我需要在标题中修复我的动画下划线。
我想将其固定在活动页面下。
下划线必须每次都返回到活动状态页。
我还添加了截图(首先是我现在拥有的,第二个是我想要的): https://gyazo.com/bf66aba84f4fef0440a11a85dcf83aed https://gyazo.com/c6aa43d5e3ac4bf014e2216467f7ddac
我的灵感来自(默认代码):Codepen.io
在演示页面中,您还标记了活动下划线位置。我将把它添加到下面。我是通过媒体查询做到的。
如果你帮助我,我会很高兴。
样式:
@media screen and (max-width: 1530px) {
.header {background-size: auto 150%}
.aktivniopenz {margin-left: 8% !important}}
@media screen and (max-width: 1290px) {
.aktivniubytovani {margin-left: 27% !important}
.aktivnicenik {margin-left: 45% !important}
.aktivnifotogalerie {margin-left: 63.5% !important}}
@media screen and (max-width: 1190px) {
.headertext {margin-right: auto;left: 0;margin-left: 355px}
.aktivniopenz {margin-left: 9% !important}
.aktivnicenik {margin-left: 45.5% !important}
.aktivnikontakt {margin-left: 82.5% !important}}
@media screen and (max-width: 1000px) {
.aktivniubytovani {margin-left: 28% !important}
.aktivnicenik {margin-left: 46.5% !important}
.aktivnifotogalerie {margin-left: 64% !important}
.aktivnikontakt {margin-left: 83% !important}}
#container {
width: 100%;
margin: -60px auto ;
font-family: main2 !important;font-weight: 600; letter-spacing: 3.5px; font-size: 1.1em;}
ul li {
display: inline;
text-align: center;}
.headeraa {
display: inline-block;
width: 19%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #185fc1;}
.headeraa:hover {text-decoration: none !important;color: #1d87eb}
.one:hover ~ hr {
margin-left: 2%;}
.two:hover ~ hr {
margin-left: 21%;}
.three:hover ~ hr {
margin-left: 41%;}
.four:hover ~ hr {
margin-left: 60.5%;}
.five:hover ~ hr {
margin-left: 80.5%;}
hr {height: .25rem !important;
width: 15%;
margin: 0 0 0 2%;
background: tomato !important;
border: none;
transition: .3s ease-in-out;
display: inline-block;}
@font-face {
font-family: main2;
src: url("fonty/main2.otf")}
.aktivniopenz {height: .24rem !important;
width: 10%;
margin: 0 0 0 7%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px;
background: tomato !important;
border: none;
transition: none;
display: inline-block;}
.aktivniubytovani { height: .24rem !important;
width: 10%;
margin: 0 0 0 26%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px;
background: tomato !important;
border: none;
transition: none;
display: inline-block;}
.aktivnicenik { height: .24rem !important;
width: 10%;
margin: 0 0 0 44.6%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px;
background: tomato !important;
border: none;
transition: none;
display: inline-block;}
.aktivnifotogalerie { height: .24rem !important;
width: 10%;
margin: 0 0 0 63%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px;
background: tomato !important;
border: none;
transition: none;
display: inline-block;}
.aktivnikontakt { height: .24rem !important;
width: 10%;
margin: 0 0 0 82%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px;
background: tomato !important;
border: none;
transition: none;
display: inline-block;}
标题代码:
<div id="container">
<div class="navbar-header">
<button class="hamburger hamburger--spring navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<!--MALY NADPIS-->
<span class="headertext2">Penzion Delta</span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul>
<li class="one">
<a href="index.html" class="openz headeraa">O PENZIONU</a>
</li>
<li class="two">
<a href="ubytovani.html" class="ubyt headeraa" style="color: #1d87eb !important;">UBYTOVÁNÍ</a>
</li>
<li class="three">
<a href="cenik.html" class="cen headeraa">CENÍK</a>
</li>
<li class="four">
<a href="fotogalerie.html" class="foto headeraa">FOTOGALERIE</a>
</li>
<li class="five">
<a href="kontakt.html" class=" kontakt headeraa ">KONTAKT</a>
</li>
<hr />
</ul>
</div>
</div>
<div class=" aktivniubytovani"></div>
答案 0 :(得分:1)
根据您目前的结构,我提出了这个快速解决方案。
首先,
.one-active {
margin-left: 2%;
}
.two-active {
margin-left: 21%;
}
.three-active {
margin-left: 41%;
}
.four-active {
margin-left: 60.5%;
}
.five-active {
margin-left: 80.5%;
}
在每个页面上将上述类添加到hr元素。
index.html页面添加<hr class="one-active" />
ubytovani.html页面添加<hr class="two-active" />
cenik.html页面添加<hr class="three-active" />
fotogalerie.html页面添加<hr class="for-active" />
kontakt.html页面添加<hr class="five-active" />
这应该有效。如果您发现此解决方案有帮助,请告诉我并将其标记为正确答案。感谢。