Mobile Menu Concept WIP

Developer
Alex Rodrigues
Size
4,592 Kb
Views
26,312
  1. Mobile Menu Concept WIP Previews
  2. Mobile Menu Concept WIP HTML Codes
  3. Mobile Menu Concept WIP CSS Codes
  4. Mobile Menu Concept WIP JS Codes

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 Previews
IQ Test

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' );
});
Mobile Menu Concept WIP - Script Codes
Mobile Menu Concept WIP - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 3
Size 4,592 Kb
Views 26,312
Do you need developer help for Mobile Menu Concept WIP?

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!

Alex Rodrigues (alex_rodrigues) Script Codes
Name
Toying With Flexslider
Responsive Checkout Concept WIP
Animated Bar Graphs
WIP - Checkout Flow Steps Progress mobile concept
Responsive Table-less Shopping Cart
SA_testing
Jquery Scroll test
A Pen by alex rodrigues
Animate delay Sass Mixin
Front End Age Gate
Create amazing video scripts 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!