Hamburger reszponzv men Tutorialok, Kdok - G-Portlon s FTP kapcsolatos oldalon
Ez a men egyszer vzszintes men norml nzetben. De ha mobilnzetben nzed, akkor kicsi hamburger men lesz.
|
<!-- navigacio -->
<div id="hamnavbg">
<nav id="hamnav"><label for="hamburger"> ☰ </label><input type="checkbox" id="hamburger"/>
<div id="hamitems">
<a href="https://">Link</a>
<a href="https://">Link</a>
<a href="https://">Link</a>
</div></nav></div>
<!-- navigacio vege -->
<!-- css kod -->
<style type="text/css">
/* Navigation */
#hamnavbg {width: 100%;margin: 0px auto;float:center;background:#ffffff;text-align:center;}
#hamnav{width: 1300px;margin: 0px auto;float:center;text-align:center;}
#hamitems{padding:15px;}
#hamitems ul{list-style: none;padding:5px;margin:0;float:center;}
#hamitems ul li{display: inline;margin: 0px;display:inline-block;}
#hamnav label, #hamburger{display: none;padding:9px;}
#hamitems a,#hamitems ul a:link,#hamitems ul a:visited{display: inline;margin: 0px;display:inline-block;text-decoration:none; margin-left:9px;margin-right:9px;}
#hamitems a:hover,#hamitems ul a:hover{-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in; }
#hamitems:after {content:""; display:table; clear:both;}
#hamitems ul li ul li , #hamitems ul li ul li:hover {float:none; display:list-item; }
#hamitems ul ul { display: none; position: absolute; }
#hamitems ul li:hover > ul { display:inherit;}
#hamitems ul ul li {float:none;}
#hamitems ul ul ul li { position: relative;}
li > a:after { content: ' ↓ '; }
li > a:only-child:after { content: ''; }
/* responsive */
@media (max-width: 900px) {
#hamnav {width: 100%;margin: 0px auto;position: sticky;text-align:right;padding-right:50px;}
#hamnav label {display:inline-block;font-size: 1.1em; color: #969190 ; font-family: "CODE"; }
#hamitems a,#hamitems ul a:link,#hamitems ul a:visited,#hamitems a,#hamitems ul a:link,#hamitems ul a:visited{box-sizing: border-box;display: block;}
#hamitems { display: none;}
#hamitems,#hamitems ul,#hamitems ul li,#hamitems ul li ul li,#hamitems ul ul ,#hamitems ul ul li,#hamitems ul ul ul li {text-align:center;float:center;}
#hamnav input:checked ~ #hamitems { display: block; }
}
</style>
<!-- css kod vege -->
|
|
AJÁNLOM AZ OLDALT
