Mobile Sub Menu Concept

Developer
Jitendra
Size
2,790 Kb
Views
52,624
  1. Mobile Sub Menu Concept Previews
  2. Mobile Sub Menu Concept HTML Codes
  3. Mobile Sub Menu Concept CSS Codes
  4. Mobile Sub Menu Concept JS Codes

How do I make an mobile sub menu concept?

Different menu effect for mobile. What is a mobile sub menu concept? How do you make a mobile sub menu concept? This script and codes were developed by Jitendra on 04 July 2022, Monday.

Mobile Sub Menu Concept Previews
IQ Test

Mobile Sub Menu Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Sub Menu Concept</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mobilebody">
<div id="mobile">
<h1>Click on middle tab</h1>
<nav id="submenu">
<ul> <li><div><i class="fa fa-bell"></i><span>Alarm</span></div></li> <li><div><i class="fa fa-camera"></i><span>Camera</span></div></li> <li><div><i class="fa fa-comments"></i><span>Chat</span></div></li> <li><div><i class="fa fa-folder-open"></i><span>Files</span></div></li> <li><div><i class="fa fa-search"></i><span>Search</span></div></li>
</ul>
</nav>
<nav id="mainmenu">
<ul> <li><i class="fa fa-envelope-o"></i><span>Email</span></li> <li id="menu" class="noactive"><i class="fa fa-bars"></i><span>Menu</span></li> <li><i class="fa fa-group"></i><span>Contact</span></li>
</ul>
</nav>
</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 Sub Menu Concept - Script Codes CSS Codes

@import url (http://fonts.googleapis.com/css?family=Andika);
*
{
margin:0px;
padding:0px;
outline:none;
}
html{height:100%}
body{
background: #4A4A4A;
padding:10px;
font-family:'Andika', sans-serif;
color:#b8a7a7;
text-transform:uppercase;
}
h1
{
font-size:1.2em;
padding:100px 15px 25px 15px;
text-shadow:0px 0px 5px #CFCFCF;
color:#C2C2C2;
text-align:center;
}
#mobilebody
{
width: 360px;
height: 550px;
padding:50px 0px 0px 0px;
background:#fff;
border-radius:25px;
border:2px solid #dadada;
margin:0 auto;
position: relative;
}
#mobile
{
width: 320px;
height: 480px;
margin: 0 auto;
position: relative;
background:#f2f2f2;
}
#mainmenu
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
#submenu ul li:hover i,#mainmenu li:hover i
{
text-shadow:0px 0px 10px #fff;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
}
#submenu ul li:hover span,#mainmenu li:hover span
{
text-shadow:0px 0px 10px #fff;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
}
ul
{
margin:0px;
padding:0px;
}
ul li
{
list-style-type:none;
float:left;
text-align:center;
}
ul li span
{
display:block;
font-size:0.7em;
}
#mainmenu ul li
{
padding:3% 0%;
background:#000;
width:35%;
font-size:1em;
color:#fff;
cursor:pointer;
}
#mainmenu ul li:nth-child(2)
{
width:30%;
background:#0F0F0F;
}
#submenu
{
position:absolute;
bottom:22px;
left:0px;
width:100%;
}
#submenu ul li
{
background:transparent;
font-size:1em;
color:#fff;
cursor:pointer;
position: relative;
height:30px;
width:20%;
-webkit-transform-origin: 0 0;
-webkit-transform: perspective(800px) rotateX(270deg);
-moz-transform-origin: 0 0;
-moz-transform: perspective(800px) rotateX(270deg);
-ms-transform-origin: 0 0;
-ms-transform: perspective(800px) rotateX(270deg);
-o-transform-origin: 0 0;
-o-transform: perspective(800px) rotateX(270deg);
transform-origin: 0 0;
transform: perspective(800px) rotateX(270deg);
}
#submenu ul li div
{
background: #0F0F0F;
padding: 10px 0px;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
-o-transform:rotateX(-180deg);
-ms-transform:rotateX(-180deg);
transform:rotateX(-180deg);
}
.activeli
{
-webkit-transform: perspective(800px) rotateX(180deg)!important;
-moz-transform: perspective(800px) rotateX(180deg)!important;
-ms-transform: perspective(800px) rotateX(180deg)!important;
-o-transform: perspective(800px) rotateX(180deg)!important;
transform: perspective(800px) rotateX(180deg)!important;
}
#submenu ul li div:hover{
background:#000;
-webkit-transition:1s;
-ms-transition:1s;
-moz-transition:1s;
-o-transition:1s;
transition:1s;
}
#submenu ul li:nth-child(1)
{
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
#submenu ul li:nth-child(2)
{
-webkit-transition:1.2s;
-moz-transition:1.2s;
-ms-transition:1.2s;
-o-transition:1.2s;
transition:1.2s;
}
#submenu ul li:nth-child(3)
{
-webkit-transition:1.4s;
-moz-transition:1.4s;
-ms-transition:1.4s;
-o-transition:1.4s;
transition:1.4s;
}
#submenu ul li:nth-child(4)
{
-webkit-transition:1.6s;
-moz-transition:1.6s;
-ms-transition:1.6s;
-o-transition:1.6s;
transition:1.6s;
}
#submenu ul li:nth-child(5)
{
-webkit-transition:1.8s;
-moz-transition:1.8s;
-ms-transition:1.8s;
-o-transition:1.8s;
transition:1.8s;
}
#submenu ul li.activeli:nth-child(1)
{
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
#submenu ul li.activeli:nth-child(2)
{
-webkit-transition:1.2s;
-moz-transition:1.2s;
-ms-transition:1.2s;
-o-transition:1.2s;
transition:1.2s;
}
#submenu ul li.activeli:nth-child(3)
{
-webkit-transition:1.4s;
-moz-transition:1.4s;
-ms-transition:1.4s;
-o-transition:1.4s;
transition:1.4s;
}
#submenu ul li.activeli:nth-child(4)
{
-webkit-transition:1.6s;
-moz-transition:1.6s;
-ms-transition:1.6s;
-o-transition:1.6s;
transition:1.6s;
}
#submenu ul li.activeli:nth-child(5
{
-webkit-transition:1.8s;
-moz-transition:1.8s;
-ms-transition:1.8s;
-o-transition:1.8s;
transition:1.8s;
}

Mobile Sub Menu Concept - Script Codes JS Codes

$("#menu").click(function(){ if($(this).attr("class") == "noactive") { $(this).removeClass("noactive"); $("#submenu li").addClass("activeli"); } else { $(this).addClass("noactive"); $("#submenu li").removeClass("activeli"); }
});
Mobile Sub Menu Concept - Script Codes
Mobile Sub Menu Concept - Script Codes
Home Page Home
Developer Jitendra
Username berdejitendra
Uploaded July 04, 2022
Rating 4
Size 2,790 Kb
Views 52,624
Do you need developer help for Mobile Sub Menu Concept?

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!

Jitendra (berdejitendra) Script Codes
Name
Facebook Flat Notification
Pure CSS3 Vertical menu with nice hover effect
Two joint circles - One element
Log in Form
Mobile App UI
Hidden menu on click or touch
Services table
App login screen with CSS3 Animation
IPad Sign Up
CSS3 Lion
Create amazing web content 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!