2017-10-21 112 views
0

J'essaye de créer une barre de navigation flexible qui a un menu déroulant sur de plus petits écrans. Je me suis basé sur https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnavBarre de navigation flexible cassée sur des écrans plus petits

Le menu déroulant se brise sur les petits écrans. J'ai des icônes au-dessus du mot. Donc, au lieu de "Home Home" il a une icône de la maison au lieu de la première maison avec le titre en dessous.

// FUNCTION FOR NAV BAR // 
 
function myfunction() { 
 
    var topNavX = document.getElementById("myTopnav"); 
 
    if (topNavX.className === "topnav") { 
 
    topNavX.className += "responsive"; 
 
    } else { 
 
    topNavX.className = "topnav"; 
 
    } 
 
}
.topnav { 
 
\t background-color: #66FCF1; 
 
\t overflow: auto; 
 
\t display: flex; 
 
\t margin-top: 15px; 
 
\t margin-left: 2%; 
 
\t margin-right: 2%; 
 
\t border-radius: 10px; 
 
\t text-align: justify; 
 

 
} 
 
.topnav:after{ 
 
\t content: ''; 
 
} 
 
/* Style the links inside the navigation bar */ 
 
.topnav a { 
 
\t float: left; 
 
\t display: block; 
 
\t color: black; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
\t font-size: 17px; 
 
} 
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ 
 
@media screen and (max-width: 600px) { 
 
\t .topnav a:not(:first-child) {display: none;} 
 
\t .topnav a.icon { 
 
\t \t float: right; 
 
\t \t display: block; 
 
\t } 
 
} 
 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ 
 
@media screen and (max-width: 600px) { 
 
\t .topnav.responsive {position: relative;} 
 
\t .topnav.responsive .iconJS { 
 
\t \t position: absolute; 
 
\t \t right: 0; 
 
\t \t top: 0; 
 
\t } 
 
\t .topnav.responsive a { 
 
\t \t float: none; 
 
\t \t display: block; 
 
\t \t text-align: left; 
 
\t } 
 
} 
 
          /* ABOUT ON TOP NAV BAR */ 
 
#topNavAbout { 
 
\t flex: 1; 
 
\t font-family: "Walter Turncoat"; 
 
\t font-weight: bold; 
 
\t line-height: 160%; 
 
} 
 
         /* ABOUT ON TOP NAV BAR ON HOVER */ 
 
#topNavAbout:hover { 
 
\t background-color: darkgoldenrod; 
 
} 
 
          /* A TO Z ON TOP NAV */ 
 
#topNavAlpha { 
 
\t flex: 1; 
 
\t font-family: "Cinzel Decorative"; 
 
\t font-weight: bold; 
 
\t line-height: 160%; 
 
} 
 
         /* A TO Z ON TOP NAV ON HOVER */ 
 
#topNavAlpha:hover { 
 
\t background-color: darkviolet; 
 
} 
 
         /* FLEX AND FONT FOR CHEESY IN NAV BAR */ 
 
#topNavCheesy { 
 
\t flex: 1; 
 
\t font-family: "Bad Script"; 
 
\t font-weight: 900; 
 
\t line-height: 160%; 
 
\t font-size: 1.1em; 
 
} 
 
        /* TOP NAV CHEESY ON HOVER */ 
 
#topNavCheesy:hover{ 
 
\t background-color: #FF0; 
 
} 
 
        /* CLASSIC ON TOP NAV BAR */ 
 
#topNavClassic { 
 
\t flex: 1; 
 
\t font-family: "Sofia"; 
 
\t font-weight: bold; 
 
\t font-size: 1.3em; 
 
\t line-height: 150%; 
 
} 
 
        /* CLASSIC ON TOP NAV BAR ON HOVER */ 
 
#topNavClassic:hover { 
 
\t background-color: burlywood; 
 
} 
 
#topNavDonate { 
 
\t flex: 1; 
 
\t font-family: "Verdana"; 
 
\t font-weight: bold; 
 
\t line-height: 170%; 
 
} 
 
#topNavDonate:hover { 
 
\t background-color: #009CDE; 
 
} 
 
         /* CHANGED TEXT ON MAIN NAV BAR */ 
 
#topNavFav { 
 
\t font-family: "Permanent Marker"; 
 
\t flex: 1; 
 
\t line-height: 160%; 
 
} 
 
         /* FAVORITE HOVER ON NAV BAR */ 
 
#topNavFav:hover { 
 
\t background-color: #00FF00; 
 
} 
 
          /* GAME ON TOP NAV */ 
 
#topNavGame { 
 
\t flex: 1; 
 
\t font-family: "Monoton"; 
 
\t font-weight: bold; 
 
} 
 
         /* GAME ON TOP NAV ON HOVER */ 
 
#topNavGame:hover { 
 
\t background-color: orange; 
 
} 
 
         /* CHANGED TEXT ON MAIN NAV BAR */ 
 
#topNavGod { 
 
\t flex: 1; 
 
\t font-family: "Finger Paint"; 
 
\t font-size: .86em; 
 
\t font-weight: bold; 
 
\t line-height: 190%; 
 
} 
 
        /* GOD-AWFUL ON HOVER OVER MAIN NAV BAR */ 
 
#topNavGod:hover { 
 
\t background-color: white; 
 
} 
 
           /* NAV BAR GROSS */ 
 
#topNavGross { 
 
\t flex: 1; 
 
\t font-family: "Nosifer"; 
 
} 
 
         /* GROSS ON MAIN NAV BAR ON HOVER */ 
 
#topNavGross:hover { 
 
\t background-color: #F00; 
 
} 
 
           /* Home ICON and TEXT */ 
 
.topNavHome { 
 
\t flex: 1; 
 
\t font-family: "Sedgwick Ave"; 
 
\t font-weight: bold; 
 
\t line-height: 150%; 
 
} 
 
          /* ROULETTE ON TOP NAV */ 
 
#topNavRoul { 
 
\t flex: 1; 
 
\t font-family: "Marck Script"; 
 
\t font-weight: bold; 
 
\t font-size: 1.5em; 
 
} 
 
          /* ROULETTE ON TOP NAV ON HOVER */ 
 
#topNavRoul:hover { 
 
\t background-color: crimson; 
 
} 
 
           /* WTF ON MAIN NAV BAR */ 
 
#topNavWTF { 
 
\t flex: 1; 
 
\t font-family: "Rock Salt"; 
 
\t font-size: .75em; 
 
\t font-weight: bold; 
 
} 
 
         /* WTF ON MAIN NAV BAR ON HOVER */ 
 
#topNavWTF:hover { 
 
\t background-color: fuchsia; 
 
}
      <!-- MAIN NAV BAR --> 
 
<div class="topnav" id="myTopnav"> 
 
    <a class="topNavHome" id="current0" href="https://www.alansmitheepicks.com"><img src="icons/home.png" title="Home" alt="Home"><br>Home</a> 
 
    <a id="topNavFav" href="favorites.html"><img src="icons/fav.png" title="Favorites" alt="Favorites"><br>Favorites</a> 
 
    <a id="topNavCheesy" href="cheesy.html"><img src="icons/cheese.png" title="Cheesy" alt="Cheesy"><br>Cheesy</a> 
 
    <a id="topNavGod" href="godawful.html"><img src="icons/godawful.png" title="God Awful" alt="God Awful"><br>Godawful</a> 
 
    <a id="topNavWTF" href="wtf.html"><img src="icons/wtf.png" title="WTF" alt="WTF?!"><br>W...T...F?!</a> 
 
    <a id="topNavGross" href="gross.html"><img src="icons/gross.png" title="Gross" alt="Gross"><br>Gross</a> 
 
    <a id="topNavClassic" href="classic.html"><img src="icons/classic.png" title="Classic" alt="Classics"><br>Classic</a> 
 
    <a id="topNavAlpha" href="atoz.html"><img src="icons/atoz.png" title="A to Z" alt="Search A-Z"><br>A to Z</a> 
 
    <a id="topNavGame" href="game.html"><img src="icons/game.png" title="Game" alt="Game"><br>Game</a> 
 
    <a id="topNavRoul" href="roulette.html"><img src="icons/roulette.png" title="Roulette" alt="Roulette"><br>Roulette</a> 
 
    <a id="topNavDonate" href="donate.html"><img src="icons/paypal.png" title="Donate" alt="Donate"><br>Donate</a> 
 
    <a id="topNavAbout" href="about.html"><img src="icons/clapper.png" title="About Us" alt="Who is Alan Smithee?"><br>About</a> 
 
    <a href="#" class="icon" onclick=myFunction()>&#9776;</a> 
 
</div>

+1

Bonjour, bienvenue à SO .. et votre question est? S'il vous plaît se référer à [Comment puis-je poser une bonne question?] (https://stackoverflow.com/help/how-to-ask) – rmjoia

+0

"* Le menu déroulant pauses *" ne nous en dit pas beaucoup - ce qui est exactement ce qui se passe ? Ne s'affiche-t-il pas? Cela affecte-t-il le contenu ci-dessous? Apparaît-il incorrectement, et si oui, comment devrait-il apparaître et comment apparaît-il réellement? – FluffyKitten

Répondre

0

Pour ajouter une classe supplémentaire

topNavX.className + = "sensibles";

Il doit avoir un espacement avant d'ajouter le nouveau nom de classe.