I need help figuring out how to change the button text with whatever dropdown menu item is clicked. I was trying to do using onclick, but I couldn't figure out how to make it work. My professor suggested using the class attribute, jquery click() and the attr() method. Any suggestions or hints you can give would be helpful. I am open to using a different kind of drop down menu, but it does have to be a hover drop down menu that scrolls instead of showing the full list.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<script>
</script>
<body>
<table style="width:25%">
<tr>
<td valign= "top">
<h3 id= "total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn">Jan</button>
<div class="dropdown-content">
<a class="option" href="#" onclick="selected=Jan">Jan</a>
<a class="option" href="#" onclick="selected=Feb">Feb</a>
<a class="option" href="#" onclick="selected=Mar">Mar</a>
<a class="option" href="#" onclick="selected=Apr">Apr</a>
<a class="option" href="#" onclick="selected=May">May</a>
<a class="option" href="#" onclick="selected=Jun">Jun</a>
<a class="option" href="#" onclick="selected=Jul">Jul</a>
<a class="option" href="#" onclick="selected=Aug">Aug</a>
<a class="option" href="#" onclick="selected=Sep">Sep</a>
<a class="option" href="#" onclick="selected=Oct">Oct</a>
<a class="option" href="#" onclick="selected=Nov">Nov</a>
<a class="option" href="#" onclick="selected=Dec">Dec</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
this
Inside the myFunction you can change the textContent of the button by the clicked elements textContent using this.
document.querySelector('.dropbtn').textContent = this.textContent;
event listeners
Instead of using the inline scripting I would recommend using eventListeners for your buttons
.addEventListener('click', myFunction);
// add an event listener to all of your <a> elements
document.querySelectorAll('.option').forEach((x) => {
x.addEventListener('click', myFunction);
});
function myFunction() {
document.getElementById('month').textContent = this.textContent;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<script>
</script>
<body>
<table style="width:25%">
<tr>
<td valign="top">
<h3 id="total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn">Jan</button>
<div class="dropdown-content">
<a class="option" href="#">Jan</a>
<a class="option" href="#">Feb</a>
<a class="option" href="#">Mar</a>
<a class="option" href="#">Apr</a>
<a class="option" href="#">May</a>
<a class="option" href="#">Jun</a>
<a class="option" href="#">Jul</a>
<a class="option" href="#">Aug</a>
<a class="option" href="#">Sep</a>
<a class="option" href="#">Oct</a>
<a class="option" href="#">Nov</a>
<a class="option" href="#">Dec</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
use fixed :
Create function and call function in the a harf and send values
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<body>
<table style="width:25%">
<tr>
<td valign="top">
<h3 id="total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn" >Jan</button>
<div class="dropdown-content" id="main">
<a href="#" onclick="get_onclick(0)" >Jan</a>
<a href="#" onclick="get_onclick(1)" >Feb</a>
<a href="#" onclick="get_onclick(2)" >Mar</a>
<a href="#" onclick="get_onclick(3)" >Apr</a>
<a href="#" onclick="get_onclick(4)" >May</a>
<a href="#" onclick="get_onclick(5)" >Jun</a>
<a href="#" onclick="get_onclick(6)" >Jul</a>
<a href="#" onclick="get_onclick(7)" >Aug</a>
<a href="#" onclick="get_onclick(8)" >Sep</a>
<a href="#" onclick="get_onclick(9)" >Oct</a>
<a href="#" onclick="get_onclick(10)" >Nov</a>
<a href="#" onclick="get_onclick(11)" >Dec</a>
</div>
</div>
</td>
</tr>
</table>
<script>
let mydiv=document.getElementById('main');
get_onclick = (number) =>
{
document.getElementById("month").innerHTML =mydiv.children[number].textContent;
}
</script>
</body>
</html>
Related
I am having problem with the toggle button in the menu, when its max-width = 1200px,. i.e. When i toggle on to the toggle button, nothing appears.
Though i have made the menu for max-width = 1200px but still it doesn't appears. Please help
I have added bootstrap 4.3 in the html script. Please if anyone can have a look at it and help me out. As i am having a problem with this and i want it to be done through css as i am not well equipped with javascript.
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
/*********************************
*** Marque
*********************************/
.marquee {
background: #2a4563;
box-shadow: 0 0 5px 0;
padding: 1px;
/*border: 1px;
border-left: 10px;
border-style: solid;
border-color: #FF5733 ;*/
}
.marquee a {
color: white;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
}
/*********************************
*** Logo Bar
*********************************/
#logo-bar {
background: #fff;
padding-top: 3px;
}
#logo-bar .logo {
display: flex;
align-items: center;
}
#logo-bar .logo img{
max-width: 280px;
}
#logo-bar .logo-2 img{
max-width: 200px;
margin-left: 70px;
}
#menu {
background: #2a4563;
box-shadow: 0 0 3px 0;
}
#menu ul {
text-align: center;
margin-bottom: 0;
}
#menu ul li {
display: inline-block;
padding: 8px 20px;
}
#menu ul li:hover {
background-color: orange;
transition: ease-in .3s;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu ul li:hover a {
color: black;
transition: ease-in .3s;
}
#menu ul li ul {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul {
display: block;
z-index: 1;
padding: 10px;
}
#menu ul li ul li {
display: block;
}
#menu ul li ul li:hover {
background: #2a4563;
transition: ease-in .3s;
}
#menu ul li ul li:hover a {
color: #fff;
transition: ease-in .3s;
}
label{
font-size: 26px;
line-height: 70px;
display: none;
}
#toggle{
display: none;
}
.mobile-menu{
display: none;
}
/*********************************
*** Title
*********************************/
#title{
min-height: 550px;
background: grey;
}
#media only screen and (max-width: 1200px){
.logo-bar{
display: none;
}
.mobile-menu{
display: block;
box-shadow: 0 0 5px 0;
}
.mobile-menu-1{
padding: 0 0 0 50px;
}
label{
display: block;
pointer: cursor;
}
#menu ul li{
display: none;
width: 100%;
text-align: center;
}
#menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + #menu ul{
display: block;
}
}
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!-- Marquee Starts -->
<div class="marquee">
<marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
<i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering & prevention of spreading Novel Corona Virus
</marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
<div id="logo-bar">
<div class="container">
<div class="logo-bar">
<div class="row">
<div class="logo col-lg-6 col-md-6">
<h1>Navbar</h1>
</div>
<div class="logo-2 col-lg-3 col-md-3">
<h1>Second Navbar</h1>
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu-sidebar col-lg-3 col-md-3">
<button class="btn btn-sm btn-primary">Student Login</button> <button class="btn btn-sm btn-primary">Admin Login</button>
<h6><strong>Call Us:</strong> +91-360-2277560</h6>
<h6><Strong>Email Us:</Strong></h6>
<h6>info#theglobaluniversity.co.in</h6>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="row">
<div class="mobile-menu-1 col-10 d-flex my-auto">
<h1>Navbar</h1>
</div>
<div class="mobile-menu-2 col-2 d-flex my-auto">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
</div>
</div>
</div>
<!-- Logo Bar Ends -->
<!-- Menu Bar Starts -->
<div id="menu">
<div class="container">
<ul>
<li><i class="fas fa-home"></i> </li>
<li class="nav-item">About Us
<ul>
<li class="nav-sub-item">About TGU</li>
<li class="nav-sub-item">TGU Vision</li>
<li class="nav-sub-item">TGU Mission</li>
<li class="nav-sub-item">Board of Mgt.</li>
<li class="nav-sub-item">Approval & Affiliation</li>
</ul>
</li>
<li class="nav-item">Academic
<ul>
<li class="nav-sub-item">Courses</li>
<li class="nav-sub-item">Department</li>
<li class="nav-sub-item">Syllabus</li>
</ul>
</li>
<li class="nav-item">Admission
<ul>
<li class="nav-sub-item">Procedure</li>
<li class="nav-sub-item">Apply Online</li>
<li class="nav-sub-item">Scholarship</li>
<li class="nav-sub-item">Download Form</li>
<li class="nav-sub-item">Merit</li>
</ul>
</li>
<li class="exam.html">Examination
<ul>
<li class="nav-sub-item">Exam Form</li>
<li class="nav-sub-item">Exam Notice</li>
<li class="nav-sub-item">Admit Card</li>
<li class="nav-sub-item">Verification</li>
</ul>
</li>
<li class="research.html">Research</li>
<li class="facilities.html">Facilities
<ul>
<li class="nav-sub-item">Library</li>
<li class="nav-sub-item">WiFi Campus</li>
<li class="nav-sub-item">Hostel & Cafe</li>
<li class="nav-sub-item">Digitalization</li>
<li class="nav-sub-item">First Aid</li>
<li class="nav-sub-item">Sports</li>
</ul>
</li>
<li>Contact</li>
<li>
<div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I'm trying to incorporate a dropdown button in my website but I don't know why the content of button is not showing correctly:
<body>
<div class="topnav">
<a id="inicio" href="index.php">Inicio</a>
<a id="contacto" href="login.php" >Login</a>
<a id="contacto" href="registro.php">Registro</a>
<a id="contacto" href="#" >Contacto</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Iniciar sesion
</div>
</div>
<input type="text" placeholder="Search..">
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
You can try the code here: https://jsfiddle.net/pgn6yw5f/
Set the background color of the dropdown-content a in your CSS-file. below is an example
dropdown-content a {
/* Your other styling */
background-color: inherit;
}
that solves the display issue.
After some search
Here is an example of a drop-down menu using CSS only to improve performance
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
for more examples on CSS only dropdown menus look HERE
I have a simple navbar that I am trying to get the background to be green when clicked. However it does not seem to be working.
When I hover over the link the background turns green and works fine. However I cannot get it so that when I click on the link the background remains green and if I click another link the new active turns green and the previous active turn white.
$(".sidebar ul li").on("click", function() {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
add jquery link to your code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
I have added your code here - it seems to work right.
Maybe something overlaps your navbar? Can it happen?
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
</div>
One reason can be that when you click, what it gets clicked is the anchor element not the li.
You can add a class to your a tag and then target that class for the click function. And also modify the css to add the background when the a has the class.
So something like this for your anchor elements
<li>
<a class="nav-link" href="#Welcome">Welcome</a>
</li>
Your css would look like
.sidebar .nav-link.active {
color: #ffffff;
background-color: #1aa322;
}
And your js would be like
$(".nav-link").on('click', function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
Another reason could be that you ar executing your js before the elements are there. So try wrapping your code like.
$(document).ready(function() {
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
});
Both solutions work.
And you should also not have the same id in multiple elements. So you should get rid of id="menu" or change it to be unique for each element
color boxes inside select option in html
i want do it using html and css and without using jquery or javascript
Output should be like this
i have tried
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><span style="background-color:Red"> </span>
Red</a>
<a href="#"> <span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<span class="color" style="background-color:Red"> </span> Red
<span class="color" style="background-color:Green"> </span> Green
</div>
</div>
but output should display color boxes inside dropdown.
color boxes inside select option html
here i am using anchor tag and div tag in the code i have written.
but i want it in select, option tag
You can't do it without JavaScript - here's some very simple click handlers that do what you want:
function updateColor(element) {
var newColor = element.firstChild.style.backgroundColor;
element.parentElement.parentElement.style.backgroundColor = newColor;
console.log(newColor);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="updateColor(this)"><span style="background-color:Red" onclick="updateColor(this)"> </span>
Red</a>
<a href="#" onclick="updateColor(this)"><span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div onclick="updateColor(this)"><span class="color" style="background-color:Red"> </span> Red</div>
<div onclick="updateColor(this)"><span class="color" style="background-color:Green" onclick="updateColor(this)"> </span> Green</div>
</div>
</div>
Remove "min-width: 160px;" from .dropdown-content
And
Remove "padding: 12px 16px;" from .dropdown-content a
I am trying to make a simple navigation menu that, when hovered over, will fade in a little colored square (div) above the item option that is being hovered. But when the items are hovered over the squares are not in the right position. I am pretty sure that if I changed the position to absolute it would fix it, but I need it to be on relative so they can maintain their location. Any help is appreciated, thank you very much.
CodePen
HTML:
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'></div>
</li>
</ul>
CSS:
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.divmen {
background-color: black;
width: 210px;
height: 10px;
}
#divred {
background-color: red;
position: relative;
bottom: 77px;
left: 40px;
display: none;
}
#divorange {
background-color: orange;
position: relative;
left: 250px;
bottom: 107px;
display: none;
}
#divblue {
background-color: blue;
position: relative;
left: 460px;
bottom: 137px;
display: none;
}
#divgreen {
background-color: green;
position: relative;
bottom: 167px;
left: 670px;
display: none;
}
JavaScript:
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});
please check following code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});
</script>
<style type="text/css">
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.itemam{
height: 18px;
}
.divmen {
width: 210px;
display:none;
}
</style>
</head>
<body>
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'>divred</div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'>divorange</div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'>divblue</div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'>divgreen</div>
</li>
</ul>
</body>
</html>
I think you want something like this.
No JS/JQ required
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navmen {
margin-top: 25px;
list-style-type: none;
text-align: center;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline-block;
border-top: 10px solid transparent;
transition: border .5s ease;
}
.navitem a {
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
font-size: 22px;
display: block;
color: #000;
}
.navitem:hover a {
background: #ccc;
}
.red:hover {
border-top-color: red;
}
.green:hover {
border-top-color: green;
}
.blue:hover {
border-top-color: blue;
}
<div id="navbar">
<ul class="navmen">
<li class="navitem red" id="home">HOME
</li>
<li class="navitem green" id="item2">ITEM2
</li>
<li class="navitem blue" id="item3">ITEM3
</li>
</ul>
</div>