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
<!-- Sidebar --> <div id="sidebar"> <!-- Main navigation --> <ul class="navigation widget"> <li class="active"> <a href="../../modules/dashboard/dashboard.php"><i class="fa fa-home" aria-hidden="true"></i>Nástěnka</a></li> <li > <a href="../../modules/calendar/event.php"><i class="fa fa-calendar" aria-hidden="true"></i>Kalendář</a></li> <li > <a href="#" title="" class="expand" ><i class="fa fa-list" aria-hidden="true"></i>Oběh zboží</a> <ul> <li><a href="../../modules/goods/products.php" title="" >Zboží a služby</a></li> <li><a href="../../modules/goods/stock.php" title="" >Stav skladu</a></li> <li><a href="../../modules/contracts/contracts.php" title="" >Zakázky</a></li> <li><a href="../../modules/offers/offers.php" title="" >Nabídky</a></li> <li><a href="../../modules/orders/orders-issued.php" title="" >Vydané objednávky</a></li> <li><a href="../../modules/shipping-orders/shipping-orders.php" title="" >Expediční příkazy</a></li> <li><a href="../../modules/reservations/reservations.php" title="" >Rezervace</a></li> <li><a href="../../modules/receipts/receipts.php" title="" >Příjemky</a></li> <li><a href="../../modules/picklists/picklists.php" title="" >Výdejky</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-list" aria-hidden="true"></i>Fakturace</a> <ul> <li><a href="../../modules/invoice/invoice.php" title="" >Vydané faktury</a></li> <li><a href="../../modules/invoice/invoice-received.php" title="" >Přijaté faktury</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-university" aria-hidden="true"></i>Banka</a> <ul> <li><a href="../../modules/bank/bank.php" title="" >Peněžní ústavy</a></li> <li><a href="../../modules/bank/bank-connection.php" title="" >Bankovní spojení</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-money" aria-hidden="true"></i>Majetek</a> <ul> <li><a href="../../modules/property/property.php" title="" >Karty majetku</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-envelope" aria-hidden="true"></i>Evidence pošty</a> <ul> <li><a href="../../modules/post/post-boxes.php" title="" >Schránky</a></li> <li><a href="../../modules/post/post-received.php" title="" >Došlá pošta</a></li> <li><a href="../../modules/post/post-sent.php" title="" >Odeslaná pošta</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-building-o" aria-hidden="true"></i>Organizace</a> <ul> <li><a href="../../modules/company/company.php" title="" >Seznam firem</a></li> <li><a href="../../modules/company/contacts.php" title="" >Kontaktní osoby</a></li> <li><a href="../../modules/company/employees.php" title="" >Zaměstnanci</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-road" aria-hidden="true"></i>Kniha jízd</a> <ul> <li><a href="../../modules/routes/cars.php" title="" >Vozidla</a></li> <li><a href="../../modules/routes/routes.php" title="" >Kniha jízd</a></li> <li><a href="../../modules/routes/cars-reservations.php" title="" >Rezervace vozidel</a></li> <li><a href="../../modules/routes/fuel.php" title="" >PHM</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-tasks" aria-hidden="true"></i>Firemní aktivity</a> <ul> <li><a href="../../modules/activities/activities.php" title="" >Aktivity</a></li> <li><a href="../../modules/activities/tasks.php" title="" >Úkoly</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-wrench" aria-hidden="true"></i>Servis</a> <ul> <li><a href="../../modules/service/service.php" title="" >Servisní karty</a></li> <li><a href="../../modules/service/service-dispatching.php" title="" >Dispečink</a></li> <li><a href="../../modules/service/service-employees.php" title="" >Servisní zaměstnanci</a></li> <li><a href="../../modules/service/service-types.php" title="" >Typy servisu</a></li> <li><a href="../../modules/service/service-statements.php" title="" >Typy výkazů</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-indent" aria-hidden="true"></i>Číselníky</a> <ul> <li><a href="../../modules/currency/currency.php" title="" >Měna</a></li> <li><a href="../../modules/vat/vat.php" title="" >DPH</a></li> <li><a href="../../modules/zip/zip.php" title="" >PSČ</a></li> <li><a href="../../modules/districts/districts.php" title="" >Okresy</a></li> <li><a href="../../modules/regions/regions.php" title="" >Regiony</a></li> <li><a href="../../modules/countries/countries.php" title="" >Země</a></li> <li><a href="../../modules/seasons/seasons.php" title="" >Období</a></li> </ul> </li> <li > <a href="#" title="" class="expand" ><i class="fa fa-indent" aria-hidden="true"></i>Pomocné číselníky</a> <ul> <li><a href="../../modules/products-groups/products-groups.php" title="" >Skupiny zboží</a></li> <li><a href="../../modules/sort-of-activity/sort-of-activity.php" title="" >Druh činnosti</a></li> <li><a href="../../modules/structure/structure.php" title="" >Organizační struktura</a></li> <li><a href="../../modules/transport/transport.php" title="" >Způsob dopravy</a></li> <li><a href="../../modules/payment/payment.php" title="" >Forma úhrady</a></li> <li><a href="../../modules/documents/documents.php" title="" >Dokumenty</a></li> </ul> </li> <li > <a href="../../core/settings/settings.php"><i class="fa fa-cogs" aria-hidden="true"></i>Nastavení</a></li> <li><a href="../../core/inc/logout.php"><i class="fa fa-power-off" aria-hidden="true"></i>Odhlásit</a></li> </ul> <!-- /main navigation --> </div><!-- /sidebar -->
HTML
Autoformát
Standardní režim
Mobilní zobrazení
ul, ol { padding: 0; margin: 0; list-style: none; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } li { line-height: 20px; } ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } ul.inline, ol.inline { margin-left: 0; list-style: none; } ul.inline > li, ol.inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } #sidebar { width: 250px; margin-right: 3px; float: left; display: block; } .sidebar-stats li, .user-links li a { background: #fefefe; background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fafafa)); background: -webkit-linear-gradient(top, #ffffff 0%,#fafafa 100%); background: -o-linear-gradient(top, #ffffff 0%,#fafafa 100%); background: -ms-linear-gradient(top, #ffffff 0%,#fafafa 100%); background: linear-gradient(top, #ffffff 0%,#fafafa 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); } .navigation > li { position: relative; margin-top: 1px; } .navigation > li:first-child { margin-top: 0; } .navigation > li > a { color: #333333; font-size: 12px; font-weight: bold; display: block; padding: 11px 14px; border: 1px solid #d5d5d5; font-family: 'Open Sans', sans-serif; font-weight: 600; background: #f5f5f5; background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); } .navigation > li.active > a, .navigation > li.active > a:hover, .navigation > li.active > a:active, .navigation > li > a.subOpened, .navigation > li > a.subOpened:hover { color: #fff; vertical-align: middle; background: #5B9BB4; border-color: #47869E; box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset; -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation > li.active > a:hover > i, .navigation > li > a.subOpened:hover > i { color: #ffffff; } .navigation > li.active > a > i, .navigation > li > a.subOpened > i { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } .navigation > li > a:hover { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background: #fcfcfc; border-color: #ccc; color: #497b95; } .navigation > li > a:active { background: #ffffff; color: #555555; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation > li > a:hover > i { color: #497b95; } .navigation > li > a > i, .navigation > li > a > b { color: #5C696F; font-size: 14px; display: block; float: left; margin-top: 3px; text-align: left; margin-right: 6px; } .navigation > li.active a strong { background: #555; box-shadow: 0 1px 2px #4A4A4A inset, 0 1px 2px rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 1px 2px #4A4A4A inset, 0 1px 2px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 1px 2px #4A4A4A inset, 0 1px 2px rgba(255, 255, 255, 0.2); } .navigation li a strong { font-family: Arial, Helvetica, sans-serif; padding: 5px 7px 4px 7px;color: #fff; line-height: 13px; text-shadow: none; position: absolute; right: 10px; top: 11px; background: #5B6368; font-size: 11px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2) inset; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2) inset; } .navigation > li > ul { background: #fff; } .navigation > li > ul > li { position: relative; border: 1px solid #ddd; border-top: 0; } .navigation > li > ul > li.current { } .navigation > li > ul > li:first-child { border-top: 1px solid #ddd; } .navigation > li > ul > li.current > a, .navigation > li > ul > li.current > a:hover { color: #327394; margin-right: -1px; } .navigation > li > ul > li > a { color: #5f5f5f; font-size: 11px; display: block; padding: 8px 12px; background: #fcfcfc; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1 ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .navigation > li > ul > li > a:hover { background: #fafafa; color: #B14131; padding: 8px 12px; } .navigation > li > ul > li > a:before { content: ""; float: left; width: 5px; height: 5px; background: url(../img/elements/interface/plus.png) no-repeat; margin-right: 10px; margin-top: 7px; } .navigation > li > ul > li > a:hover { box-shadow: -1px 0 0 #EF705B, 2px 0 0 #EF705B inset; -webkit-box-shadow: -1px 0 0 #EF705B, 2px 0 0 #EF705B inset; -moz-box-shadow: -1px 0 0 #EF705B, 2px 0 0 #EF705B inset; } .navigation > li > a.expand { margin-bottom: 1px; } .navigation > li > ul > li > ul { box-shadow: 1px 0 0 #b1b7bb, 0 1px 0 #b1b7bb, 0 -1px 0 #b1b7bb; -webkit-box-shadow: 1px 0 0 #b1b7bb, 0 1px 0 #b1b7bb, 0 -1px 0 #b1b7bb; -moz-box-shadow: 1px 0 0 #b1b7bb, 0 1px 0 #b1b7bb, 0 -1px 0 #b1b7bb; } .navigation > li > ul > li > ul li { border-top: 1px solid #f2f2f2; } .navigation > li > ul > li > ul li:first-child { border-top: 0; } .navigation > li > ul > li > ul li a { padding: 8px 12px 8px 17px; color: #5f5f5f; font-size: 11px; display: block; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .navigation > li > ul > li > ul li a:hover, .navigation > li > ul > li > ul li a.current { background-color: #fdfdfd; color: #B14131; } .navigation > li > ul > li > ul li a:before { content: ""; float: left; width: 5px; height: 5px; background: url(../img/elements/interface/plus_light.png) no-repeat; margin-right: 10px; margin-top: 7px; } .navigation li ul li a.subOpened:before { float: left; width: 5px; height: 1px; background: url(../img/elements/interface/minus.png) no-repeat; margin-right: 10px; margin-top: 9px; } .navigation li ul li a.subOpened, .navigation > li > ul > li > a.current { color: #2883b8; background-color: #fafafa; box-shadow: -1px 0 0 #b1b7bb, 2px 0 0 #b1b7bb inset; -webkit-box-shadow: -1px 0 0 #b1b7bb, 2px 0 0 #b1b7bb inset; -moz-box-shadow: -1px 0 0 #b1b7bb, 2px 0 0 #b1b7bb inset; }
CSS
Autoformát
CSS reset
Až na konci
/*! * Collapsible.js v1.2.0 * https://github.com/jordnkr/collapsible * * Copyright 2017, Jordan Ruedy * This content is released under the MIT license * http://opensource.org/licenses/MIT */ (function($, undefined) { $.fn.collapsible = function(options) { var defaults = { accordion: false, accordionUpSpeed: 400, accordionDownSpeed: 400, collapseSpeed: 400, contentOpen: null, arrowRclass: 'arrow-r', arrowDclass: 'arrow-d', animate: true }; var settings = $.extend(defaults, options); return this.each(function() { if (settings.animate === false) { settings.accordionUpSpeed = 0; settings.accordionDownSpeed = 0; settings.collapseSpeed = 0; } var $thisEven = $(this).children(':even'); var $thisOdd = $(this).children(':odd'); var accord = 'accordion-active'; $(this).children(':nth-child(even)').css('display','none'); if (settings.accordion === true) { if (settings.contentOpen !== null) { $($thisEven[settings.contentOpen]).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); $($thisOdd[settings.contentOpen]).show().addClass(accord); } $($thisEven).click(function() { if ($(this).next().attr('class') === accord) { $(this).next().slideUp(settings.accordionUpSpeed).removeClass(accord); $(this).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); } else { $($thisEven).children().removeClass(settings.arrowDclass).addClass(settings.arrowRclass); $($thisOdd).slideUp(settings.accordionUpSpeed).removeClass(accord); $(this).next().slideDown(settings.accordionDownSpeed).addClass(accord); $(this).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); } }); } else { if (settings.contentOpen !== null) { if (Array.isArray( settings.contentOpen )) { for (var i = 0; i < settings.contentOpen.length; i++) { var index = settings.contentOpen[i]; $($thisEven[index]).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); $($thisOdd[index]).show(); } } else { $($thisEven[settings.contentOpen]).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); $($thisOdd[settings.contentOpen]).show(); } } $($thisEven).click(function() { $(this).children(':first-child').toggleClass(settings.arrowRclass + ' ' + settings.arrowDclass); $(this).next().slideToggle(settings.collapseSpeed); }); } }); }; })(jQuery); $('.expand').collapsible({ defaultOpen: 'current,third', cookieName: 'navAct', cssOpen: 'subOpened', cssClose: 'subClosed', speed: 200 });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>