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
<title>Překrytí stránky vyhledávacím formulářem</title> <h1>Překrytí stránky vyhledávacím formulářem</h1> <div class="search"> <div class="search-overlay"></div> <button class="search-open search-button search-item">Search</button> <form class="search-form"> <button type="button" class="search-close">× Close</button> <p> <label><input type="radio" name="type" checked>Pictures</label> <label><input type="radio" name="type">Videos</label> <label><input type="radio" name="type">People</label> </p> <div class="search-table"> <div class="search-field"> <input type="text" name="q" class="search-input search-item"> </div> <div class="search-control"> <button onclick="return false" class="search-button search-item"> Search </button> </div> </div> </form> </div> <p>Formulář pro hledání se zobrazí po kliknutí na tlačítko a překryje celou stránku.</p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* { box-sizing: border-box; } .search-table { display: table; width: 100%; } .search-field { display: table-cell; } .search-input, .search-field{ width: 100%; } .search-item { padding: .4em .8em; border: 1px solid #0D6AB7; background: #fff; color: #1081DD; } .search-button { padding-left: 32px; background: #1081DD url(http://jecas.cz/files/responsivni-hledani/zoom.png) 8px center no-repeat; color: #fff; } .search-form { display: none; position: fixed; top: 0; left: 0; width: 100%; background: #fff; padding: 1em; box-shadow: 0px 0px 5px 5px #666; } .search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; display: none; } .search-toggle { position: absolute; right: 1em; top: 2em; } .search-close { position: absolute; top: .5em; right: .5em; background: 0; border: 0; color: #0D6AB7; font-weight: bold; }
CSS
Autoformát
CSS reset
Až na konci
var searchFrom = $(".search-form"); var searchOverlay = $(".search-overlay"); var searchInput = $(".search-input"); var showSearch = function(){ searchFrom.slideDown("fast"); searchOverlay.fadeIn(); searchInput.focus(); }; var hideSearch = function() { searchFrom.slideUp("fast"); searchOverlay.fadeOut(); }; $(".search-open").click(showSearch); $(".search-overlay, .search-close").click(hideSearch);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>