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 id=cssmenu><ul><li><a href="/">Domů</a></li> <li><a href="#">Revize elektro</a><ul> S <li><a href="/rdfghjjhj.php" title="">Rdgfh </a></li> <li><a href="/vcbghp" title="">Rdfghj</a></li> <li><a href="/r55545m.php" title="">Rdsfghj</a></li> <li><a href="/r45ghjjk.php" title="">Rdfghjk</a></li> <li><a href="/dfdffdu.php" title="">Rdfghj</a></li> </ul></li> </ul></div> <div class="slider-container"> <div class="slider"> <div class="slider__item"> <img src="images/1.jpg" alt=""> <span class="slider__caption">číslo 1.<a href="">dfggfddgfd >></a> </span> </div> <div class="slider__item"> <img src="images/2.jpg" alt=""> <span class="slider__caption">číslo 2</span> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a, #cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;box-sizing:border-box;} #cssmenu:after, #cssmenu > ul:after{content:"";display:block;clear:both;line-height:0;height:0;} #cssmenu #menu-button{display:none;} #cssmenu{background:#0093DD;border-top:solid white;border-right:solid white;} #cssmenu > ul{width:100%;margin:0;padding:0;display:flex;flex-wrap:nowrap;flex-direction:row;font-weight:700;} #cssmenu > ul > li{flex-grow:1;text-align:center;float:left;border-left:solid white;} #cssmenu > ul > li > a{padding:17px 0;width:100%;display:block;font-size:120%;letter-spacing:1px;text-decoration:none;color:white;} #cssmenu > ul > li:hover > a{height:100%;background-color:red;} #cssmenu ul ul{width:100%;position:absolute;font-weight:400;text-align:left;left:-9999px;} #cssmenu ul ul li{width:100%;} #cssmenu li:hover > ul{left:auto;} #cssmenu ul ul li a{width:100%;border-bottom:1px solid rgba(150, 150, 150, 0.15);padding:11px 15px;text-decoration:none;color:white;background-color:#0093DD;} #cssmenu ul ul li a:hover{background-color:red;} before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .slider-container { position: relative; overflow: hidden; width: 100%; margin: 0 auto; background-color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slider { position: relative; width: 9999px; } .slider:before, .slider:after { display: table; content: ' '; } .slider:after { clear: both; } .slider__item { position: relative; float: left; margin: 0; padding: 0; height: 100%; } .slider__item img { display: block; max-width: 100%; height: auto; } .slider__switch span { color: #fff; display: block; width: 32px; height: 32px; } /* Arrows */ .slider__switch { position: absolute; top: 50%; margin-top: -20px; padding: 10px 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; border-radius: 1px; background: #000; opacity: .3; transition: opacity .15s ease; fill: #fff; } .slider__switch--prev { left: 10px; } .slider__switch--next { right: 10px; } .slider__switch:hover { opacity: .85; } .slider__switch[disabled] { visibility: hidden; opacity: 0; } .slider__caption { position: absolute; bottom: 30px; left: 30px; display: block; max-width: 500px; padding: 10px; color: #fff; background: rgba(0, 0, 0, .4); box-shadow: 0 0 20px 10px rgba(0,0,0,.4); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */ } .slider__caption[disabled] { opacity: 0; visibility: hidden; } .slider-nav { line-height: 30px; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; margin: 0; padding: 0; text-align: center; z-index: 99999; filter: alpha(opacity=90); /* ie8 */ } .slider-nav__control { display: inline-block; width: 12px; height: 12px; margin: 0 3px; -webkit-transition: background .5s ease; -moz-transition: background .5s ease; -o-transition: background .5s ease; transition: background .5s ease; border: 2px solid #fff; border-radius: 50%; background: transparent; } .slider-nav__control.is-active { width: 12px; height: 12px; background: #fff; } .slider.has-touch { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; } @media (max-width: 580px) { .slider__switch { display: none; } .slider__caption { display: none; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>