Responsive Menu 1
How do I make an responsive menu 1?
What is a responsive menu 1? How do you make a responsive menu 1? This script and codes were developed by Kelly Kalouta on 14 November 2022, Monday.
Responsive Menu 1 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Menu 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Google -Fonts--> <link href='https://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin-ext' rel='stylesheet' type='text/css'>
<!--Font-awsome--> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container"> <div class="xs-menu-cont"> <a id="menutoggle"><i class="fa fa-align-justify"></i> </a> <nav class="xs-menu displaynone"> <ul> <li class="active"> <a href="#">Αρχική</a> </li> <li> <a href="#">Ανδρικά</a> </li> <li> <a href="#">Γυναικεία</a> </li> <li> <a href="#">Παιδικά</a> </li> <li> <a href="#">ΤΥΠΩΣΕ ΤΟ!!!</a> </li> <li> <a href="#">TshirtΑΤΣΙ</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> </div> <nav class="menu"> <ul> <li class="active"> <a href="#">Αρχική</a> </li> <li class="drop-down"> <a href="#">Ανδρικά</a> <div class="mega-menu fadeIn animated"> <div class="mm-6column"> <span class="left-images"> <img src="https://cdn3.bigcommerce.com/s-1mib0w/products/986/images/1366/3055_max__14020.1414878051.500.659.jpg?c=2"> <p>Most Popular Styles </p> </span> <span class="categories-list"> <ul> <span>Computer</span> <li>Desktops</li> <li>Laptops</li> <li>Tablets</li> <li>Monitors</li> <li>Networking Printers</li> <li>Scanners</li> <li>Jumpers & Cardigans</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>TV & Video</span> <li>LED TVs <li>Plasma TVs <li>3D TVs <li>DVD & Blu-ray Players <li>Home Theater Systems <li>Cell Phones <li>Apple iPhone <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>Car Electronics</span> <li>GPS & Navigation</li> <li>In-Dash Stereos</li> <li>Speakers</li> <li>Subwoofers</li> <li>Amplifiers</li> <li>MP3 Players</li> <li>iPods</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> </div> </li> <li class="drop-down"> <a href="#">Γυναικεία</a> <div class="mega-menu fadeIn animated"> <div class="mm-6column"> <span class="left-images"> <img src="https://s-media-cache-ak0.pinimg.com/564x/1e/1f/2d/1e1f2d1c6f61c62966df92f8f8c74d96.jpg"> <p>Most Popular Styles </p> </span> <span class="categories-list"> <ul> <span>Computer</span> <li>Desktops</li> <li>Laptops</li> <li>Tablets</li> <li>Monitors</li> <li>Networking Printers</li> <li>Scanners</li> <li>Jumpers & Cardigans</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>TV & Video</span> <li>LED TVs <li>Plasma TVs <li>3D TVs <li>DVD & Blu-ray Players <li>Home Theater Systems <li>Cell Phones <li>Apple iPhone <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>Car Electronics</span> <li>GPS & Navigation</li> <li>In-Dash Stereos</li> <li>Speakers</li> <li>Subwoofers</li> <li>Amplifiers</li> <li>MP3 Players</li> <li>iPods</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> </div> </li> <li class="drop-down"> <a href="#">Παιδικά</a> <div class="mega-menu fadeIn animated"> <div class="mm-6column"> <span class="left-images"> <img src="http://www.bc-collection.eu/uploads/products/thumb/businessconcepts/9_music_entertainment/29_club_events/TK300_01.jpg"> <p>Most Popular Styles </p> </span> <span class="categories-list"> <ul> <span>Computer</span> <li>Desktops</li> <li>Laptops</li> <li>Tablets</li> <li>Monitors</li> <li>Networking Printers</li> <li>Scanners</li> <li>Jumpers & Cardigans</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>TV & Video</span> <li>LED TVs <li>Plasma TVs <li>3D TVs <li>DVD & Blu-ray Players <li>Home Theater Systems <li>Cell Phones <li>Apple iPhone <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> <div class="mm-3column"> <span class="categories-list"> <ul> <span>Car Electronics</span> <li>GPS & Navigation</li> <li>In-Dash Stereos</li> <li>Speakers</li> <li>Subwoofers</li> <li>Amplifiers</li> <li>MP3 Players</li> <li>iPods</li> <li><a class="mm-view-more" href="#">View more →</a></li> </ul> </span> </div> </div> </li> <li> <a href="#">ΤΥΠΩΣΕ ΤΟ!!!</a> </li> <li> <a href="#">TshirtΑΤΣΙ</a> </li> <li> <a>Επικοινωνία</a> </li> </ul> </nav> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>
Responsive Menu 1 - Script Codes CSS Codes
body { font-family: 'Sintony', sans-serif; color: #e5e5e5; font-size: 12px; background: #bfbfbf; line-height: 1;
}
*, *:before, *:after { box-sizing: border-box;
}
/** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;
}
ol, ul { list-style: none;
}
blockquote, q { quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
header h2 { margin: 25px 10px;
font-size: 28px;
text-align: center;
color: cornsilk;
}
.container { margin: 10px auto; display: table; max-width: 1140px; width: 100%;
}
.container:after, .container:before { content: "" clear : both;
}
nav.menu { background: #00AFF0; position: relative; min-height: 50px; height: 100%;
}
.menu > ul > li { list-style: none; display: inline-block; color: #fff; line-height: 80px;
}
.menu > ul li a, .xs-menu li a { text-decoration: none; color: #fff; display:block; padding: 0px 24px;
}
.menu > ul li a:hover { background:#444; color: #fff; transition-duration: 0.3s; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s;
}
.active{ background:#444 !important;
}
.displaynone{ display: none;
}
.xs-menu-cont{
display:none;
}
.xs-menu-cont > a { background: none repeat scroll 0 0 #ff7f50; border-radius: 3px; padding: 3px 6px; display: block; border-bottom:1px solid #E67248; box-shadow: 0 1px 2px #e67248; -webkit-box-shadow: 0 1px 2px #e67248; -moz-box-shadow: 0 1px 2px #e67248;
}
.xs-menu-cont > a:hover{ cursor: pointer;
}
.xs-menu li {
color: #fff;
padding: 14px 30px;
border-bottom: 1px solid #ccc;
background: #FF7F50;
}
.xs-menu a{
text-decoration:none;
}
.mega-menu { background: none repeat scroll 0 0 #888; left: 0; margin-top: 3px; position: absolute; width: 100%; padding:15px; display:none; transition-duration: 0.9s;
}
#menutoggle i { color: #fff; font-size: 33px; margin: 0; padding: 0;
}
/*--column--*/
.mm-6column:after, .mm-6column:before, .mm-3column:after, .mm-3column:before{
content:"";
display:table;
clear:both;
}
.mm-6column, .mm-3column { float: left; position: relative; }
.mm-6column { width: 50%;
}
.mm-3column { width: 25%;
}
.responsive-img { display: block; max-width: 100%;
}
.left-images{
margin-right:25px;
} .left-images, .left-categories-list { float: left;
}
.categories-list li { display: block; line-height: normal; margin: 0; padding: 5px 0;
}
.categories-list li :hover{ background:inherit !important;
}
.left-images > p { background: none repeat scroll 0 0 #ff7f50; display: block; font-size: 18px; line-height: normal; margin: 0; padding: 5px 14px;
}
.categories-list span { font-size: 18px; padding-bottom: 5px; text-transform: uppercase;
}
.mm-view-more{ background: none repeat scroll 0 0 #ff7f50; color: #fff; display: inline !important; line-height: normal; padding: 5px 8px !important; margin-top:10px;
}
.display-on{
display:block; transition-duration: 0.9s;
}
.drop-down > a:after{
content:"\f103";
color:#fff;
font-family: FontAwesome;
font-style: normal;
margin-left: 5px;
} /*MediaQuerys*/ @media (max-width: 600px) {
.menu { display:none; } .xs-menu li a { padding:0px;
} .xs-menu-cont{ display:block ; } }
/*Animation--*/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn;
}
Responsive Menu 1 - Script Codes JS Codes
$(document).ready(function() { //responsive menu toggle $("#menutoggle").click(function() { $('.xs-menu').toggleClass('displaynone'); }); //add active class on menu $('ul li').click(function(e) { e.preventDefault(); $('li').removeClass('active'); $(this).addClass('active'); }); //drop down menu $(".drop-down").hover(function() { $('.mega-menu').addClass('display-on'); }); $(".drop-down").mouseleave(function() { $('.mega-menu').removeClass('display-on'); }); });
Developer | Kelly Kalouta |
Username | kelkal |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 4,554 Kb |
Views | 14,168 |
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!
Name | Size |
Footer | 2,908 Kb |
Slideshow | 2,037 Kb |
Footer Click-Tshirt | 4,640 Kb |
Top Bar | 4,489 Kb |
Dokimi1 | 7,227 Kb |
Slideshow Funny Tshirts | 2,788 Kb |
Home Page | 1,805 Kb |
Oi | 2,285 Kb |
A Pen by Kelly Kalouta | 1,807 Kb |
Return Policy | 4,408 Kb |
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!
Name | Username | Size |
Count up | Alanshortis | 2,391 Kb |
Hexagons | Ashmind | 4,360 Kb |
Incremental game | Eprouver | 5,868 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
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!