Navigation Menu

Developer
Juan Vargas
Size
2,839 Kb
Views
16,192
  1. Navigation Menu Previews
  2. Navigation Menu HTML Codes
  3. Navigation Menu CSS Codes
  4. Navigation Menu JS Codes

How do I make an navigation menu?

Navigation Menu for jQuery plugin using the Envato API. What is a navigation menu? How do you make a navigation menu? This script and codes were developed by Juan Vargas on 14 October 2022, Friday.

Navigation Menu Previews
IQ Test

Navigation Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="menu"> <div class="container"> <ul class="left"> <li class="logo"><a href="#" target="_blank"><span>Envato<strong>API</strong></span></a></li> </ul> <ul class="right"> <li class="tf"><a href="#" target="_blank"><span>Themeforest</span> </a></li> <li class="cc active"><a href="#" target="_blank"><span>Codecanyon</span></a></li> <li class="vh"><a href="#" target="_blank"><span>Videohive</span></a></li> <li class="gr"><a href="#" target="_blank"><span>Graphicriver</span></a></li> <li class="pd"><a href="#" target="_blank"><span>Photodune</span></a></li> <li class="o3"><a href="#" target="_blank"><span>3docean</span></a></li> </ul> </div>
</div>
<div class="categories"> <div class="container"> <ul> <li class="dropdown">Wordpress <div class="dropdown-content"> <a href="#">Blog / Magazine</a> <a href="#">Corporate</a> <a href="#">Creative</a> <a href="#">Mobile</a> <a href="#">Personal</a> </div> </li> <li class="dropdown">HTML <div class="dropdown-content"> <a href="#">Admin Templates</a> <a href="#">Corporate</a> <a href="#">Creative</a> <a href="#">Entertainment</a> </div> </li> <li class="dropdown">eCommerce <div class="dropdown-content"> <a href="#">WooCommerce</a> <a href="#">Magento</a> <a href="#">Opencart</a> <a href="#">Shopify</a> </div> </li> </ul> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Navigation Menu - Script Codes CSS Codes

html,body { -webkit-font-smoothing: antialiased;
}
body { padding:0px; margin:0px; font-family:arial; font-size:13px; background:#eee; font-family: 'Open Sans', sans-serif; font-weight: 400;
}
a { text-decoration:none;
}
.container { max-width:980px; margin:0px auto;
}
.menu { background:#fff; height:60px;
}
.menu ul { margin:0px; padding:0px;
}
.menu ul.right { float:right;
}
.menu ul.left { float:left;
}
.menu ul li{ float:left; list-style:none; display:inline;
}
.menu ul li.right{ float:right; font-size:21px;
}
.menu ul li a { color:#777;
}
.menu ul li.logo a span{ font-size:14px; text-transform:none;
}
.menu ul li.logo a span strong{ font-weight:600;
}
.menu ul li.right i{ color:#ccc;}
.menu ul li.active a{ color:#FFF;}
.menu ul li.active a{ line-height:60px; display:inline-block;
}
.tf.active{ background:#1fbda5;
}
.cc.active{ background:#e78733;
}
.vh.active{ background:#f1a31e;
}
.gr.active{ background:#308eb1;
}
.pd.active{ background:#0f8c98;
}
.o3.active{ background:#b31a3d;
}
.menu ul li span{ height:60px; line-height:60px; padding:0 10px; text-transform:uppercase; font-size:11px;
}
.menu ul li:first-child a{ padding-left:0px; }
.menu ul li a:hover{ color:#555;}
.menu ul li.active a:hover{ color:#eee;}
.categories { background-color: #ccc; color: white; padding: 15px; font-size: 14px; border: none; cursor: pointer;
}
.categories ul{ margin:0px; padding:0px;
}
.categories .dropdown { position: relative; display: inline-block; padding:5px 10px 10px 0px; border-radius:3px;
}
.categories .dropdown {
}
.categories .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; border:none; min-width: 160px; z-index: 99; margin:0px; top:32px; left:0px;
}
.categories .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
}
.categories .dropdown-content a:hover {background-color: #f1f1f1}
.categories .dropdown:hover .dropdown-content { display: block;
}
.categories .dropdown:hover .categories .dropbtn { background-color: #3e8e41; border:none;
}

Navigation Menu - Script Codes JS Codes

//Add active class when a link is cliked
$(".menu ul li").click(function (e) { e.preventDefault(); $(".menu ul li.active").removeClass("active"); $(this).addClass("active"); var color = $(this).css("background-color"); $(".categories").css("background-color", color);
});
$(function(){ var color = $(".menu ul li.active").css("background-color"); $(".categories").css("background-color", color);
});
Navigation Menu - Script Codes
Navigation Menu - Script Codes
Home Page Home
Developer Juan Vargas
Username juanv911
Uploaded October 14, 2022
Rating 3
Size 2,839 Kb
Views 16,192
Do you need developer help for Navigation Menu?

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!

Juan Vargas (juanv911) Script Codes
Name
Reddit API
SocialCounters - Rounded Buttons
Tumblr API
Envato API
Tumblr API posts stream
SocialCounters - Square Buttons
Dribbble API
Question and Answer
A Pen by Juan Vargas
Unsplash API
Create amazing captions 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!