Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class='navigation_bg'> <div class='mobile_menu'> </div> <div class='navigation_content'> <a href='/novinky' class='navigation white'>Novinky</a> <a href='/navody' class='navigation white'>Návody</a> <a href='/forum' class='navigation white'>Fórum</a> <a href='' class='navigation white'>---</a> <a href='/ostatni' class='navigation white'>Ostatní</a> <a href='/social' class='navigation'><img src='img/yt.png' alt='Youtube'> <img src='img/fb.png' alt='Facebook'></a> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Content menu */ .navigation_bg { width:100%; height:65px; background:#272d33; display:block; } .navigation_content { min-width:400px; height:65px; max-width:1200px; background:#272d33; margin:0 auto; text-align:center; display: table; width:100%; overflow:hidden; } a.navigation { display: table-cell; vertical-align: middle; border:0px; text-align:center; width:140px; height:65px; text-transform:uppercase; font-weight:normal; background:transparent; overflow: hidden; font-size:14px; word-wrap: break-word; padding-top:5px; -webkit-transform: translateY(0px); transform: translateY(0px); } a.navigation img { height:35px; width:35px; } a.navigation::after { content: ''; display: block; width: 100%; height: 5px; background: #f23030; -webkit-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; position:relative; top:23px; } a.navigation:hover::after { -webkit-transform: translateY(-5px); transform: translateY(-5px); } a.navigation:focus::after { -webkit-transform: translateY(-5px); transform: translateY(-5px); } a.navigation:active::after { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .mobile_menu { display:none; min-width:400px; max-width:750px; width:100%; height:65px; background:transparent url('../img/menu.png') no-repeat; background-position: right 10px center; } @media only screen and (max-width: 750px) { .mobile_menu { display:block; } .navigation_content { display:block; background:#272d33; -webkit-transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out; height:305px; } a.navigation::after { top:10px; } a.navigation { min-width:400px; width:100%; display:block; padding-top:10px; background:transparent; height:40px; background:#272d33; } a.navigation img { height:25px; width:25px; } .navigation_bg { height:65px; overflow:hidden; -webkit-transition: height 0.4s ease-in-out, background 0.4s ease-in-out; transition: height 0.4s ease-in-out, background 0.4s ease-in-out; } .navigation_bg:hover { height:305px; background:#f23030; } } /* End Content menu */
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>