Mobile Menu Concept WIP
How do I make an mobile menu concept wip?
Toying with concept for diving into sub categories.. What is a mobile menu concept wip? How do you make a mobile menu concept wip? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.
Mobile Menu Concept WIP - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Menu Concept WIP</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menuWrap"> <h1>MENU</h1> <ul class="mainCatList"> <li class="mainCat"><a href="#catSub1">1</a></li> <li class="mainCat"><a href="#catSub2">2</a></li> <li class="mainCat"><a href="#catSub3">3</a></li> <li class="mainCat"><a href="#catSub4">4</a></li> </ul> <div class="subWrap"> <ul id="catSub1" class="subListWraps"> <li class="subList"><a href="#" class="subLink">Cat Link 1</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 1</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 1</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 1</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 1</a></li> </ul> <ul id="catSub2" class="subListWraps"> <li class="subList"><a href="#" class="subLink">Cat Link 2</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 2</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 2</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 2</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 2</a></li> </ul> <ul id="catSub3" class="subListWraps"> <li class="subList"><a href="#" class="subLink">Cat Link 3</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 3</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 3</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 3</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 3</a></li> </ul> <ul id="catSub4" class="subListWraps"> <li class="subList"><a href="#" class="subLink">Cat Link 4</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 4</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 4</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 4</a></li> <li class="subList"><a href="#" class="subLink">Cat Link 4</a></li> </ul> </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>
Mobile Menu Concept WIP - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
html, body, 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: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
* { box-sizing: border-box;
}
/* VARIABLES & MIXINS */
body { font-family: "Droid Serif", serif; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
li { list-style-type: none;
}
.menuWrap { position: fixed; width: 18%; background: #191919; left: 0; top: 0; height: 100%; color: #fff;
}
.menuWrap h1 { font-family: "Montserrat", sans-serif; font-weight: bold; line-height: 1.5; text-align: center; font-size: 1.5em; letter-spacing: -.1em; border-bottom: 1px solid #2e2e2e; position: relative; z-index: 100; background: #191919;
}
/* TOP LEVEl CAT WRAP */
.mainCatList { text-align: center; position: relative; float: left; width: 100%; height: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.mainCatList.active { width: 25%; top: 0; border-right: 1px solid #2e2e2e; background: #303030;
}
/* FIRST LEVEL CAT STYLES */
.mainCat { font-size: 3em; font-weight: bold; font-family: "Montserrat", sans-serif; padding: .25em; cursor: pointer; border-bottom: 1px solid #2e2e2e; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.mainCat.selected { background: #f30;
}
.mainCat:hover { background: #f30;
}
/* SUB CAT LISTS */
.subWrap { float: right; width: 0; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.subWrap.active { width: 75%;
}
.subWrap .subListWraps { position: absolute; width: 75%; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; top: -200%;
}
.subWrap .subListWraps.highlight { top: 10%;
}
.subWrap .subListWraps.highlight .subList { top: 0; opacity: 1;
}
.subList { line-height: 2em; font-size: 1.5em; padding: 0 1em; display: block; font-family: "Droid Serif", serif; position: relative; top: -3em; opacity: 0; border-bottom: 1px solid #2e2e2e; -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; -ms-transition: all 0.75s ease-in-out; -o-transition: all 0.75s ease-in-out; transition: all 0.75s ease-in-out;
}
.subList:nth-child(5) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s;
}
.subList:nth-child(4) { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s;
}
.subList:nth-child(3) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s;
}
.subList:nth-child(2) { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s;
}
.subList:nth-child(1) { -webkit-transition-delay: .35s; -moz-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s;
}
@media only screen and (max-width: 30em) { .menuWrap { width: 75%; font-size: 85%; }
}
Mobile Menu Concept WIP - Script Codes JS Codes
$('.mainCat').click(function(){ var catSelect = $(this).children('a').attr('href') $('ul.mainCatList, .subWrap').addClass('active'); $('.mainCat').removeClass('selected'); $(this).addClass('selected'); $('.subListWraps').removeClass('highlight'); $( catSelect ).addClass( 'highlight' );
});
Developer | Alex Rodrigues |
Username | alex_rodrigues |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 4,592 Kb |
Views | 26,312 |
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 |
WIP - Checkout Flow Steps Progress mobile concept | 3,960 Kb |
Mobile Menu Concept WIP | 4,592 Kb |
Front End Age Gate | 5,806 Kb |
Animated Bar Graphs | 3,919 Kb |
SA_testing | 2,188 Kb |
Responsive Checkout Concept WIP | 6,323 Kb |
A Pen by alex rodrigues | 3,920 Kb |
Learning FlexBox | 2,821 Kb |
Animate delay Sass Mixin | 3,050 Kb |
Toying With Flexslider | 5,052 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 |
React Markdown Previewer | C0d0er | 3,190 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Wikipedia viewer | Chpecson | 2,865 Kb |
Mondrian | Chrisarmstrong | 2,787 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!