Responsiv topmenu med service og søgning (LESS)
How do I make an responsiv topmenu med service og søgning (less)?
Denne menu er specifikt lavet til 4 menu-punkter. Menuen vises som en udfoldelig mobilmenu indtil 768px hvorefter den bliver til en fluid topmenu.. What is a responsiv topmenu med service og søgning (less)? How do you make a responsiv topmenu med service og søgning (less)? This script and codes were developed by Nicolaj Lund Nielsen on 13 September 2022, Tuesday.
Responsiv topmenu med service og søgning (LESS) Previews
Responsiv topmenu med service og søgning (LESS) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsiv topmenu med service og søgning (LESS)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--MainNav--> <div class="mobile-btns" data-btn="menu"> <div class="btn btn-menu" data-btn="menu" data-target="#nav"><span class="navicon"></span></div> <div class="btn btn-search" data-btn="search" data-target=".search"><span></span></div> </div> <div class="main-wrap"> <a class="logo" href="/"><img src="http://placehold.it/80x80" alt="Logo"/></a> </div> <div class="search"> <div class="main-wrap"> <div> <label for="q" class="visuallyhidden">Søg</label> <input type="search" value="" title="Indtast søgeord" id="global-search" name="q" placeholder="Hvad søger du..."> <input type="submit" value="Søg" title="Søg"> </div> </div> </div> <div id="nav" role="navigation"> <div class="main-wrap"> <div id="menu"> <!--MainMenu--> <nav class="main-nav"> <h5 class="visuallyhidden">Main menu</h5> <ul> <li> <a title="Sektion 1" href="#">Borger</a> <ul> <li> <a title="Menu Level 2" href="#">Borger menu-level 2</a> <ul> <li><a title="Menu Level 3" href="#">Borger menu-level 3</a></li> <li><a title="Menu Level 3" href="#">Borger menu-level 3</a></li> <li> <a title="Menu Level 3" href="#">Borger menu-level 4</a> <ul> <li><a title="Menu Level 4" href="#">Borger menu-level 5</a></li> <li><a title="Menu Level 4" href="#">Borger menu-level 5</a></li> </ul> </li> <li><a title="Menu Level 3" href="#">Borger menu-level 3</a></li> </ul> </li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> <li><a title="Menu Level 2" href="#">Borger menu-level 2</a></li> </ul> </li> <li> <a title="Sektion 2" href="#">Noget andet</a> </li> <li> <a title="Sektion 3" href="#">Noget tredje</a> </li> <li> <a title="Section 4" href="#">Noget fjerde</a> </li> </ul> </nav> <!--/MainMenu--> <!--ServiceMenu--> <nav class="service-menu" role="navigation"> <h5 class="visuallyhidden">Service menu</h5> <ul> <li> <a href="#">Forside</a> </li> <li> <a href="#">Nyheder</a> </li> <li> <a href="#">Ledige job</a> </li> <li> <a href="#">Akut</a> </li> <li> <a href="#">Om kommunen</a> </li> </ul> </nav> <!--/ServiceMenu--> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsiv topmenu med service og søgning (LESS) - Script Codes CSS Codes
/* ============== Clear- / Box-fixes ============== */
* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */
}
[class*="wrap"]:before,
[class*="wrap"]:after { content: " "; /* 1 */ display: table; /* 2 */
}
[class*="wrap"]:after { clear: both;
}
.lt-ie8 [class*="wrap"] { zoom: 1;
}
.main-wrap { position: relative; max-width: 962px; padding: 0 15px; margin: 0 auto;
}
@media screen and (min-width: 1200px) { .main-wrap { padding: 0 15px; width: 1170px; }
}
.logo { position: absolute; display: block; height: 40px; width: 40px; top: 0; left: 0; z-index: 120;
}
@media screen and (min-width: 768px) { .logo { height: auto; width: auto; }
}
/* ============== Menu-main ============== */
#nav { position: absolute; background: #fff; top: -100%; width: 100%; z-index: 100; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
#nav.open { top: 40px;
}
#nav .main-wrap { padding: 0; z-index: 9;
}
@media screen and (min-width: 768px) { #nav { position: relative; top: auto; border-bottom: 1px solid #dbdbdb; } #nav.open { top: auto; } #nav .main-wrap { position: static; padding: 0; }
}
.main-nav { position: relative;
}
.main-nav ul { font-size: 24px; list-style: none; padding: 0; margin: 0; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; -ms-transition: max-height 0.3s; -o-transition: max-height 0.3s; transition: max-height 0.3s;
}
.main-nav ul li { margin: 0; line-height: 1em;
}
.main-nav ul li a { position: relative; display: block; font-size: 22px; line-height: 1em; color: #10394d; background: #fff; padding: 15px 50px 15px 10px; text-decoration: none;
}
.main-nav ul li a:hover,
.main-nav ul li a:focus { color: #e54348;
}
.main-nav ul li a em { position: absolute; content: ""; top: 0; width: 50px; height: 100%; right: 0; z-index: 1200;
}
.main-nav ul li ul { overflow: hidden; max-height: 0;
}
.main-nav > ul > li { position: relative; border-top: 1px solid #ccc;
}
.main-nav > ul > li ul li { margin: 0 0 1px;
}
.main-nav > ul > li ul li:first-child { margin-top: 1px;
}
.main-nav > ul > li ul li a { position: relative; font-size: 16px; color: #48A7C2; background: #EEE;
}
.main-nav > ul > li ul li a:hover,
.main-nav > ul > li ul li a:focus { color: #666;
}
.main-nav > ul > li ul li ul li a { background-color: #dfdfdf; padding-left: 15px;
}
.main-nav > ul > li ul li ul li ul li a { background-color: #d4d4d4; padding-left: 20px;
}
.main-nav > ul > li ul li.inpath > a { color: #000;
}
.main-nav > ul > li ul li.inpath > a:not(:only-child):after { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */
}
.main-nav > ul > li a:not(:only-child):after { position: absolute; content: ""; text-align: center; top: 13px; right: 15px; width: 20px; height: 18px; padding-top: 2px; border-radius: 10px; color: #ccc; border: 1px solid #ccc; background: url(img/arrow.png) no-repeat center center;
}
.main-nav > ul > li.inpath > a { color: #000;
}
.main-nav > ul > li.inpath > a:not(:only-child):after { transform: rotate(90deg); -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari and Chrome */
}
.main-nav > ul > li.inpath > a { color: #97bfd1;
}
@media screen and (min-width: 768px) { #menu { position: relative; background: #fff; width: 100%; overflow: visible; padding-bottom: 1px; max-height: none; left: 0!important; right: 0!important; font-weight: 400; } .main-nav { padding: 0; margin: 0; } .main-nav ul li { display: inline-block; width: 24%; padding: 0; line-height: 31px; } .main-nav ul li + li { border-top: 0; text-align: center; } .lt-ie8 .main-nav ul li { display: inline; zoom: 1; } .main-nav ul li:first-child { margin: 0; } .main-nav ul li a { background: transparent; padding: 0; white-space: nowrap; } .main-nav ul li a:after { background: none!important; } .main-nav ul li a, .main-nav ul li a:hover, .main-nav ul li a:focus { background-color: transparent; } .main-nav ul li a em { display: none; } .main-nav ul li ul { position: absolute; overflow: visible; padding: 0; top: 100%; margin: 35px 15px 15px 0; } .main-nav ul li ul li a { color: #fff; } .main-nav ul li ul li.inpath a { color: #546868; } .lt-ie8 .main-nav { zoom: 1; } .main-nav > ul > li:first-child { padding-left: 100px; } .main-nav > ul > li a { display: inline-block; padding: 30px 0; } .main-nav > ul > li a:after { display: none; } .main-nav > ul > li > ul { margin: 35px 15px 15px 0; padding: 0; display: none; } .main-nav > ul > li > ul li { margin: 0 25px 0 0; } .main-nav > ul > li.inpath > ul > li.inpath > ul { display: none; } .main-nav > ul > li.inpath > ul > li.inpath > ul > li.inpath ul { display: none; }
}
/* ============== Menu-service ============== */
.service-menu { font-weight: 400; text-transform: uppercase; background: #09212c;
}
.service-menu ul { overflow: hidden; margin: 0; padding: 0;
}
.service-menu li { position: relative; display: inline-block; margin: 0; padding: 0 0 0 10px;
}
.service-menu a { text-decoration: none; white-space: nowrap; padding: .7em 0; display: inline-block; color: #fff;
}
.service-menu a:hover,
.service-menu a:focus { color: #f7aa59;
}
.lt-ie8 .service-menu a { display: inline; zoom: 1;
}
@media screen and (min-width: 768px) { .service-menu { position: absolute; top: -30px; left: 0; width: 70%; font-size: 12px; height: 30px; overflow: visible; background: transparent; padding-left: 100px; z-index: 120; } .service-menu ul { display: inline-block; text-align: left; } .lt-ie8 .service-menu ul { display: inline; zoom: 1; } .service-menu li { padding: 0 0 0 20px; } .service-menu li:first-child { padding: 0; }
}
/* ============== Buttons ============== */
.mobile-btns { position: absolute; top: 0; right: 0; width: 120px; height: 40px; font-size: 34px; text-align: center; line-height: 40px; background: transparent; cursor: pointer; z-index: 130;
}
@media screen and (min-width: 768px) { .mobile-btns { display: none; }
}
.mobile-btns .btn { margin-right: 10px; height: 40px; float: right;
}
.btn-search span { display: block; width: 40px; height: 40px; background: url(img/loop.png) no-repeat top center; background-size: 40px 80px;
}
.btn-menu { padding-top: 18px;
}
.btn-menu .navicon { position: relative; display: block; width: 30px; height: 3px; background: #10394D;
}
.btn-menu .navicon:after,
.btn-menu .navicon:before { position: absolute; display: block; content: ""; height: 3px; width: 30px; background: #10394D; z-index: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.btn-menu .navicon:after { top: -8px;
}
.btn-menu .navicon:before { top: 8px;
}
.btn-menu.open .navicon { background: transparent;
}
.btn-menu.open .navicon:after { top: 0; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.btn-menu.open .navicon:before { top: 0; transform: rotate(-45deg); -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Safari and Chrome */
}
/* ============== Search ============== */
.search { position: relative; background: #fff; z-index: 110;
}
.search .main-wrap { text-align: right; top: -40px; padding: 0;
}
.search .main-wrap div { float: right; width: 100%; background: #f3f2f2; z-index: 8;
}
.search .main-wrap input { height: 40px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.search .main-wrap input[type="search"] { width: 90%; float: left; z-index: 9; padding: 2px 0 0 10px;
}
.search .main-wrap input[type="submit"] { position: relative; width: 10%; display: block; text-indent: -9999px; background: #c7c7c7 url(img/loop.png) no-repeat center -40px; background-size: 40px 80px; z-index: 10; cursor: pointer;
}
.search.open .main-wrap { top: 40px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
@media screen and (min-width: 768px) { .search { z-index: auto; background: #000; } .search .main-wrap { top: 0; } .search .main-wrap input { height: 30px; border: 0; } .search .main-wrap input[type="submit"] { background-position: center -30px; background-size: 30px 60px; } .search .main-wrap div { width: 30%; background: #f3f2f2; z-index: 8; }
}
@media screen and (min-width: 992px) { .search .main-wrap div { width: 320px; } .search .main-wrap input[type="search"] { width: 290px; } .search .main-wrap input[type="submit"] { width: 30px; }
}
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
Responsiv topmenu med service og søgning (LESS) - Script Codes JS Codes
$(document).ready(function ($) { var $oldMenu, $currMenu; $('.mobile-btns .btn').on('click', function () { var $btn = $(this); var clickedMenu = $btn.data('btn'); var target = $btn.data('target'); if ($btn.hasClass('open')) { $btn.removeClass('open'); } else { $btn.addClass('open'); } if ($oldMenu && $oldMenu != $currMenu) { $oldMenu.removeClass('open'); } $currMenu = $(target); $oldMenu = $currMenu; if ($currMenu.hasClass('open')) { $currMenu.removeClass('open'); } else { $currMenu.addClass('open'); } });
});
| Developer | Nicolaj Lund Nielsen |
| Username | nicolund |
| Uploaded | September 13, 2022 |
| Rating | 3 |
| Size | 7,394 Kb |
| Views | 16,192 |
Do you need developer help for Responsiv topmenu med service og søgning (LESS)?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nicolaj Lund Nielsen (nicolund) Script Codes
| Name | Size |
| FrameByFrame CSS animation | 1,713 Kb |
| TweenMax staggerTo worm | 2,074 Kb |
| Tweenmax Integer Tween | 1,884 Kb |
| TimelineMax Circular loader | 2,649 Kb |
| TweenMax transformOrigin Bubble | 2,209 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| OnScreenAction | Ozgursagiroglu | 2,647 Kb |
| Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
| Modal Dialog | Gigaleet | 2,251 Kb |
| Sketchy Box | Mnicpt | 3,033 Kb |
| Drop Cap | Gsaiki | 1,571 Kb |
| Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
| Webkit decolorize | Fivera | 1,675 Kb |
| Awesome textarea | Ayoungh | 1,977 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!