0
私の応答性の高いナビゲーションバーに問題があります。画面が小さいときにトグルをクリックすると、応答して非表示のナビゲーションメニューが開きますが、メニューにはnavbarに添付されている元のCSSはありません。どんな助けもありがとう。メニューの切り替え後にnavbar cssが消える
CSS：
<style>
*{
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
background: #232526;
background: -webkit-linear-gradient(to right, #232526 , #414345);
background: linear-gradient(to right, #232526 , #414345);
margin: 0em;
font-family: 'Titillium Web', sans-serif;
font-size: 12px;
}
ul.topnav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(228,230,229,.8);
display: inline-block;
text-align: center;
width: 100%;
position: fixed;
border-bottom: 1px solid #232526;
}
ul.topnav li{
display: inline-block;
text-align: center;
}
ul.topnav li a {
color: #666666;
padding: 1.167em 1.333em;
text-decoration: none;
}
ul.topnav li a:hover {background-color: #232526;}
ul.topnav li a.active {background-color: rgba(228,230,229,.3);}
ul.topnav li.icon {display: none;}
a.navbar-brand{
text-decoration: none;
color: #666666;
}
img{
height: auto;
max-width: 100%;
width: 16.667em;
}
ul.imgcont{
margin: 0;
padding: 4.167em 0 0 0;
text-align: center;
}
ul.imgcont li{
display: inline-block;
width: auto;
}
ul.imgcont li a:hover {
background-color: rgba(228,230,229,.1);
border: 0.083em solid #232526;
border-radius: 5px;
}
footer{
position: fixed;
margin: 0;
padding: 0;
bottom: 0;
width: 100%;
background-color: rgba(228,230,229,.8);
text-align: center; /*centers all of cooter */
height: auto;
border-top: 1px solid #232526;
}
footer ul.right li a{
text-decoration: none;
color: #888888;
}
.left, .right{
display: inline-block;
list-style-type: none;
width: 40%;
height: auto;
}
.left li{
text-align: right; /*aligns right within center */
color: #888888;
}
.right li{
text-align: left;
}
.material-icons.md-14{
font-size: 1.167em;
}
.sliding-middle-out {
display: inline-block;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 0.167em;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
}
#home.sliding-middle-out:hover:after {
background-color:grey;
}
#homer.sliding-middle-out:hover:after {
background-color:black;
}
#warrior.sliding-middle-out:hover:after {
background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
background-color:darkgreen;
}
#mage.sliding-middle-out:hover:after {
background-color:#69CCF0 ;
}
#shaman.sliding-middle-out:hover:after {
background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
background-color:#A330C9;
}
#home.sliding-middle-out:hover:after {
background-color:grey;
}
#warrior.sliding-middle-out:hover:after {
background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
background-color:#ABD473
}
#mage.sliding-middle-out:hover:after {
background-color:#69CCF0 ;
}
#shaman.sliding-middle-out:hover:after {
background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
background-color:#A330C9;
}
@media screen and (max-width:760px) {
ul.topnav li:not(:first-child) {display: none;} /* makes navbar disapearr */
ul.topnav li.icon { /* creates the block for the toggle */
float: right;
display: inline-block;
}
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
@media screen and (max-width:1216px) { /* These are here to fix the overlap issue */
ul.imgcont{
margin: 0;
padding: 4.167em 0 12.500em 0;
}
}
@media screen and (max-width:1083px) {
ul.imgcont{
margin: 0;
padding: 8.333em 0 12.500em 0;
}
}
@media screen and (max-width:760px) {
ul.imgcont{
margin: 0;
padding: 4.167em 0 170px 0;
}
}
@media screen and (max-width:413px) {
ul.imgcont{
margin: 0;
padding: 4.167em 0 12.500em 0;
}
.hidden-xs {
display: none !important;
}
}
</style>
HTML：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../Cardspoiler.css">
</head>
<body>
<header>
<ul class="topnav" id="myTopnav">
<li><a id="homer" class="sliding-middle-out navbar-brand" href="Home.html">Cardspoiler</a></li>
<li><a id="home" class="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a></li> <!-- using the googleapis.com stylesheet -->
<li><a id="warrior" class="sliding-middle-out" href="Warrior.html"><i class="material-icons md-14">usb</i>Warrior</a></li>
<li><a id="druid" class="sliding-middle-out active" href="Druid.html"><i class="material-icons md-14">brightness_high</i>Druid</a></li>
<li><a id="priest" class="sliding-middle-out" href="Priest.html"><i class="material-icons md-14">add_circle</i>Priest</a></li>
<li><a id="paladin" class="sliding-middle-out" href="Paladin.html"><i class="material-icons md-14">star_half</i>Paladin</a></li>
<li><a id="hunter" class="sliding-middle-out" href="Hunter.html"><i class="material-icons md-14">my_location</i>Hunter</a></li>
<li><a id="mage" class="sliding-middle-out" href="Mage.html"><i class="material-icons md-14">whatshot</i>Mage</a></li>
<li><a id="shaman" class="sliding-middle-out" href="Shaman.html"><i class="material-icons md-14">opacity</i>Shaman</a></li>
<li><a id="warlock" class="sliding-middle-out" href="Warlock.html"><i class="material-icons md-14">person_outline</i>Warlock</a></li>
<li><a id="rogue" class="sliding-middle-out" href="Rogue.html"><i class="material-icons md-14">visibility_off</i>Rogue</a></li>
<li><a id="minions" class="sliding-middle-out" href="Minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>Minions</a></li>
<li><a id="spells" class="sliding-middle-out" href="Spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>Spells</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:30px;" onclick="myFunction()">☰</a>
</li>
</ul>
</header>
<main>
<ul class="imgcont">
<li><a class="sliding-middle-out" href="../Cards/1/Jade_Idol.html"><img src="../Cards/1/Jade_Idol_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/1/Mark_of_the_Lotus.html"><img src="../Cards/1/Mark_of_the_Lotus_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/3/Celestial_Dreamer.html"><img src="../Cards/3/Celestial_Dreamer_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/3/Jade_Blossom.html"><img src="../Cards/3/Jade_Blossom_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/3/Pilfered_Power.html"><img src="../Cards/3/Pilfered_Power_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/4/Jade_Spirit.html"><img src="../Cards/4/Jade_Spirit_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/5/Lotus_Agents.html"><img src="../Cards/5/Lotus_Agents_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/5/Lunar_Visions.html"><img src="../Cards/5/Lunar_Visions_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/5/Virmen_Sensei.html"><img src="../Cards/5/Virmen_Sensei_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/6/Aya_Blackpaw.html"><img src="../Cards/6/Aya_Blackpaw_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/6/Jade_Behemoth.html"><img src="../Cards/6/Jade_Behemoth_S.png" ></a></li>
<li><a class="sliding-middle-out"href="../Cards/10/Kun_the_Forgotten_King.html"><img src="../Cards/10/Kun_the_Forgotten_King_S.png" ></a></li>
</ul>
</main>
<footer>
<div class="footer">
<ul class="left hidden-xs">
<li><a style="text-decoration:none;font-size:20px;">CARDSPOILER.COM</li>
<li><a style="text-decoration:none;color:#9B764C;">Freedom to know</a></li>
<li>We are here to bring you visual, leaked spoilers for all of the cards you love within a simple gallery setting.</li>
<li><a href="mailto:[email protected]" style="text-decoration:none;color:#9B764C;font-size: 10px;">CONTACT US</a>
<a href="../../Privacy_Policy.html" style="text-decoration:none;color:#9B764C;font-size: 10px;">PRIVACY POLICY</a></li>
</ul>
<ul class="right">
<li><a href="MSoG.html">Mean Streets of Gadgetzan</a></li>
<li><a href="ONiK.html">One Night in Karazhan</a></li>
<li><a href="WotOG.html">Whispers of the Old Gods</a></li>
<li><a href="tLoE.html">The League of Explorers</a></li>
<li><a href="TGT.html">The Grand Tournament</a></li>
<li><a href="BrM.html">Blackrock Mountain</a></li>
</ul>
</div>
</body>
<!-- SCRIPTS -->
<script src="../../Cardspoiler.js"></script>
</html>
JS：
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += "responsive";
} else {
x.className = "topnav";
}
}