Mobile Dropdown Top Nav

Developer
Tim Normington
Size
3,183 Kb
Views
16,192
  1. Mobile Dropdown Top Nav Previews
  2. Mobile Dropdown Top Nav HTML Codes
  3. Mobile Dropdown Top Nav CSS Codes
  4. Mobile Dropdown Top Nav JS Codes

How do I make an mobile dropdown top nav?

What is a mobile dropdown top nav? How do you make a mobile dropdown top nav? This script and codes were developed by Tim Normington on 05 December 2022, Monday.

Mobile Dropdown Top Nav Previews
IQ Test

Mobile Dropdown Top Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Dropdown Top Nav</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="topnav"> <div class="menu_item"> <i class="fa fa-home"></i> <span class="menu_item_text"> HOME </span> </div> <div class="menu_item"> <i class="fa fa-briefcase"></i> <span class="menu_item_text"> PORTFOLIO </span> </div> <div class="menu_item"> <i class="fa fa-bullseye"></i> <span class="menu_item_text"> SERVICES </span> </div> <div class="menu_item"> <i class="fa fa-newspaper-o"></i> <span class="menu_item_text"> NEWS </span> </div> <div class="menu_item"> <i class="fa fa-comments"></i> <span class="menu_item_text"> BLOG </span> </div> <div class="menu_item"> <i class="fa fa-gears"></i> <span class="menu_item_text"> CLIENTS </span> </div> <div class="menu_item"> <i class="fa fa-paint-brush"></i> <span class="menu_item_text"> TOOLS </span> </div> <span class="menu_text"> MENU </span> <div class="close_container"> <i class="fa fa-arrow-circle-o-down menu-icon"></i> </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>

Mobile Dropdown Top Nav - Script Codes CSS Codes

.container { background-color: #56B548; display: block; width: 320px; height: 240px; margin: 0 auto; font-family: 'Raleway', sans-serif;
}
.topnav { background-color: #F1F2F2; width: 100%; height: 200px; display: flex; justify-content: space-around; flex-wrap: wrap; overflow: visible; transform: translateY(-180px); transition: .5s all ease; padding: 10px; box-sizing: border-box; box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.5);
}
.close_container { cursor: pointer; border-radius: 50%; background-color: #F1F2F2; width: 50px; height: 50px; position: absolute; margin-top: 75px; margin-left: -60px; box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);
}
.close_container i { font-size: 30px; margin-top: 10px; margin-left: 12px; color: #3C738B; transition: .5s all ease;
}
.menu_text { position: absolute; margin-top: 80px; margin-left: -100px; font-size: 12px; color: #3C738B; transition: .5s all ease;
}
.menu_item { width: 75px; display: flex; flex-direction: column; align-items: center; color: #56B548;
}
.menu_item i { font-size: 33px; margin-bottom: 5px;
}
.menu_item span { font-size: 12px;
}

Mobile Dropdown Top Nav - Script Codes JS Codes

$(document).ready(function() { var toggle = $('.close_container'); var clicked = false; toggle.click(function() { if (clicked === false) { $('.topnav').css('transform', 'translateY(0)'); $('.menu_text').css('opacity', '0'); $('.menu-icon').css('transform', 'rotate(180deg)'); $('.menu-icon').css('color', '#DC9E57'); clicked = true; } else { $('.topnav').css('transform', 'translateY(-180px)'); $('.menu_text').css('opacity', '1'); $('.menu-icon').css('transform', 'rotate(0deg)'); $('.menu-icon').css('color', '#3C738B'); clicked = false; }; });
});
Mobile Dropdown Top Nav - Script Codes
Mobile Dropdown Top Nav - Script Codes
Home Page Home
Developer Tim Normington
Username tnormington
Uploaded December 05, 2022
Rating 3
Size 3,183 Kb
Views 16,192
Do you need developer help for Mobile Dropdown Top Nav?

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!

Tim Normington (tnormington) Script Codes
Name
Social Media Sidebar
Online Banking Interface
Image gallery
Loading Bar Animation
SVG Coffee Animation
JQuery Social Media Ribbon Links
A Pen by Tim Normington
Expanding Circle Menu
Color Picker
Modular Sassy Flex Navigation
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!