I'm trying to create a pretty basic mobile drop-down menu that expands on click for the top-right nav of this codepen portfolio page project for Free Code Camp. The menu never shows up, but when I inspect the element it seems like the javascript function is actually working, with the "show" CSS class being added and removed to the mobileNavDrop div.
The invisible menu also seems to be located on the page where it's supposed to be, as can be seen in this screenshot using the inspect element tool:
Invisible drop-down menu highlighted with inspect element tool
I've tried pushing it all the way forward with z-index and making the banner invisible to see if it's hiding behind things, but it isn't. I even tried just having the menu start as visible rather than with "display: none;" and it still doesn't show up on the page.
The advice I've gotten elsewhere is to just use jquery and bootstrap, but I'd hoped to understand things more by trying to just write everything from scratch. So it's possible something I wrote for the responsive layout is conflicting?
Here's at least the sections of code that I thought would be relevant. Thanks!
HTML
<div class='container-navbar'>
<div class='navbar'>
<div class='row'>
<div class='col-sm-2 col-md-1'>
<ul class='nav-left'>
<li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
</ul>
</div>
<div class='col-sm-2 col-md-3'>
<div class='mobile-nav'>
<i onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></i>
<div id='mobileNavDrop' class='mobile-nav-drop'>
<a href='#about'>about</a>
<a href='#portfolio'>the work</a>
<a href='#contact'>contact</a>
</div>
</div>
<ul class='nav-right'>
<li><a href='#about'>about</a></li>
<li><a href='#portfolio'>the work</a></li>
<li><a href='#contact'>contact</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
.mobile-nav-icon {
padding: 1.25em;
}
.mobile-nav-icon:hover, .mobile-nav-icon:focus {
background: #40514f;
color: #fff;
}
.mobile-nav {
position: relative;
display: inline-block;
float: right;
overflow: visible;
}
.mobile-nav-drop {
display: none;
position: absolute;
right: 0;
background: #ccc;
min-width: 10em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}
.show {
display: block;
}
.mobile-nav-drop a {
color: #000;
padding: 1em;
display: block;
}
.mobile-nav-drop a:hover {
background: #aaa;
}
JS
function mobileNavDrop() {
document.getElementById('mobileNavDrop').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.mobile-nav-icon')) {
var dropdowns = document.getElementsByClassName('mobile-nav-drop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
You need:
.show {
display: block;
position: absolute; /* add this line, */
top: 0; /* and this one */
}
Plus, make sure the overflow is visible in every container of that nav that might not be large enough to contain the drop-down menu.
You are probably not seeing the icon because you have not included the FontAwesome library for the icon (fa fa-bars).
try adding this cdn reference to your <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
or download and install a local copy.
function mobileNavDrop() {
document.getElementById('mobileNavDrop').classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('.mobile-nav-icon')) {
var dropdowns = document.getElementsByClassName('mobile-nav-drop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}else
{
openDropdown.classList.contains('show');
}
}
}
};
.mobile-nav-icon {
padding: 1.25em;
}
.mobile-nav-icon{
background-color:grey;
}
.mobile-nav-icon:hover, .mobile-nav-icon:focus {
background: #40514f;
color: darkgrey;
}
.mobile-nav {
position: relative;
display: inline-block;
float: right;
overflow: visible;
}
.mobile-nav-drop {
position: absolute;
right: 0;
background: #ccc;
min-width: 10em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.2);
}
.hide{
display: none;
}
.show {
display: block;
}
.mobile-nav-drop a {
color: #000;
padding: 1em;
display: block;
}
.mobile-nav-drop a:hover {
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-navbar'>
<div class='navbar'>
<div class='row'>
<div class='col-sm-4 col-md-1'>
<ul class='nav-left'>
<li class='header-button'><a href='http://www.freecodecamp.com/davallerr' target='_blank'>davallerr</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3'>
<div class='mobile-nav'>
<div onclick='mobileNavDrop()' class='fa fa-bars mobile-nav-icon'></div>
<div id='mobileNavDrop' class='mobile-nav-drop hide'>
<a href='#about'>about</a>
<a href='#portfolio'>the work</a>
<a href='#contact'>contact</a>
</div>
</div>
<ul class='nav-right'>
<li><a href='#about'>about</a></li>
<li><a href='#portfolio'>the work</a></li>
<li><a href='#contact'>contact</a></li>
</ul>
</div>
</div>
</div>
</div>
In your javascript. I added an else statement so it toggles back and forth.
Your statement only removes 'show' but does not add it back.
Related
I made a dropdown menu in my header, and when I click the moon icon (at the top right), the dropdown list doesn't show up but the function does get called when I click the icon. I've tried to use buttons but then clicking on the icon doesn't work.
Any one help me with this? I am new to this thanks.
Html:
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg" class="dropbtn" onclick="Dropdown()"></i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
CSS:
.dropbtn {
background-color: #24252A;
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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
Javascript:
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
You have two class attributes in your icon element.
When the user clicks the icon there are two click events - the first happens on the icon itself and the show class is correctly added.
The second is the general click on the window. Having two classes confuses the JS matches function which reckons the element does not match (ie would not get selected with .dropbtn) [probably not exactly 'confused' it just looks at the first class attribute so misses the dropbtn value] so it clears the show class.
If you put all the icon's classes into one attribute value then things work OK.
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #24252A;
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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
cursor: pointer;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<li>
<div class="dropdown">
<script src="./assets/js/Dropdown.js"></script>
<i class="fa-solid fa-bolt fa-lg dropbtn" onclick="Dropdown()">click me</i>
<div id="myDropdown" class="dropdown-content">
<a><i class="fa-solid fa-moon"></i> Dark Mode</a>
<a><i class="fa-solid fa-sun"></i> Light Mode</a>
<a><i class="fa-solid fa-display"></i> System</a>
</div>
</div>
</li>
You could instead consider using event.stopPropagation in the first event handler which would stop the click event going through to the whole window.
I used to have that problem.
But, you don't have to reinvent the wheel, I recommend using a CSS framework, like Materialize or Bootstrap.
I recommend Materialize, it's easy to use and you just have to initialize each element you want to use.
I show you an example of navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Materialize initializers -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});</script>
</body>
</html>
I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible
The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector
You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");
Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app
I have a menubar with 2 options which shows dropdowns on click, technically theyre all shown even you click only one. All I wanted to do is to hide other dropdowns after when I click other menu items.
What is wrong with my code?
BODY:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
CSS:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
font-family: verdana;
font-size: 14px;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="jquery.js"></script>
</style>
The problem with your code is that it toggles both dropdowns. Therefore, when they are both not shown they get this class.
You can do something like this:
<body>
<ul>
<li class="File">
File
<div class="dropdown-content" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<!-- THE FUNCTION FOR CLICK -->
<script>
var drptochoose;
function hideDropdowns(excludeId) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) {
openDropdown.classList.remove('show');
}
}
}
function myFunction(id) {
id.classList.toggle("show");
hideDropdowns(id.id);
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideDropdowns();
}
}
</script>
<!-- END OF FUNCTION FOR CLICK -->
</body>
You need something like this
jsFiddleDemoNavBar
I dont think you need to go through all that code to do what your looking for as i understand it. Just use a .hide class to hide the dropdowns by default on page load and then toggle them using the button onclick with call(this) and nextElementSibling.
Here is the code.
<style>
.hide{
display:none;
}
</style>
<body>
<ul>
<li class="File">
File
<div class="dropdown-content hide" id="myDropdown">
Open
Save
Save As
Close
</div>
</li>
<li class="Edit">
Edit
<div class="dropdown-content hide" id="myDropdown2">
Undo
Redo
Cut
Copy
Paste
</div>
</li>
</ul>
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;">
PANTS
</div>
<script>
var drptochoose;
function myFunction() {
var isAlreadyOpen = false;
if(!this.nextElementSibling.classList.contains('hide'))
{
// if the clicked button dropdown is already open then use this bool to not show it again.
isAlreadyOpen = true;
}
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (!openDropdown.classList.contains('hide')) {
openDropdown.classList.toggle("hide");
}
}
if(!isAlreadyOpen)
{
// if the dropdown was hidden when clicked then show it
this.nextElementSibling.classList.toggle("hide");
}
}
</script>
</body>
Hope this helps.
window.onclick = function(e) {
if (e.target.matches('.dropbtn')) {
var allDropDown = document.querySelectorAll('.dropdown-content');
//This will hide all the dropdown for everytime you click
[].forEach.call(allDropdown, function(dropdown){
dropdown.classList.add('hide');
});
//This will show the subdrop down of that menu
var dropdown = e.target.parent.querySelector(".dropdown-content");
dropdown.classList.add('show');
}
}
}
The below code has two drop down menus which load container on button click and drop down closes on clicking anywhere on page. Though the window load works but the pages inside takes too much time to load even on local server obviously because my javascript code isn't the way it should. So guys what should my javascript code like so that it loads page correctly and at the same time closes drop down on clicking anywhere on page [if both drop downs are open both should close on click like in snippet].
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
$("#notificationContainer").load("notifications.php");
document.getElementById("myDropdown").classList.remove("show");
$("#scoreContainer").load("score.php");
document.getElementById("myDropdown2").classList.remove("show");
}
.dropdown,
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content,
.dropdown-content2 {
display: none;
background-color: #fff;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0;
}
.dropdown-content a,
.dropdown-content2 a {
padding: 10px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropbtn {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: red;
}
.dropbtn2 {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: green;
}
.dropdown-content,
.dropdown-content2 {
border: 2px solid #c6c6c6;
border-top: none;
}
#notificationContainer,
#scoreContainer {
min-width: 400px;
min-height: 100px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td style="padding-right:15px;">
</td>
<td style="padding-right:15px;">
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">one</button>
<div id="myDropdown2" class="dropdown-content2">
<div id="scoreContainer"></div>
</div>
</div>
</td>
<td style="padding-right:15px;">
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">two</button>
<div id="myDropdown" class="dropdown-content">
<div id="notificationContainer"></div>
</div>
</div>
</td>
</tr>
</table>
The above javascript is modified from the below single drop down menu code which loaded the page inside container instantly, but my modified version [above] takes too much time:
<script type="text/javascript">
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
$( "#notificationContainer" ).load( "notifications.php" );
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
there is nothing inherently wrong or slow about your javascript code. have you tried inspecting how long your PHP code runs? because that's where I would start looking for the problem.
There is nothing wrong with your dropdowns. They work fine. But they lack in design and the code looks way too much for such small control. I suggest you use Bootstrap. CSS and Javascript codes are external and you just need to place your dropdown in your project by coding some HTML.
There are several different designs and the way it works simpler than what you coded. Take a look at the below example and this page for more info about it:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdown Example</h2>
<p>Nice design, easy usage, good performance.</p>
<p><b>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</b></p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>THIS</li>
<li>IS</li>
<li>A DROPDOWN</li>
</ul>
</div>
</div>
</body>
</html>
EDIT: its working fine in IE but not in chrome browser
i made CSS dropdown menu in my web page which will be applied on all pages but navigation bar works fine at top but didn't work at margin-top:135 or any other place. how can i fix this error in my asp.net website. please anyone help me... At "margin-top:135" no submenu can be selected.
html code
<div style="position:absolute; top: 3px; left: 179px; height: 165px; width: 944px;"
id="cont">
<ul id="sddm">
<li><a href="index.aspx">
Home</a>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Company</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
About Us
GEPCO BoD
Top Management
Organizational Chart
Telephone Directory
Consumer
Existing Stuff Strength
</div>
</li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Customer Service</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Electric Tariff
Print Duplicate Bill
Customer Centered
Load Shedding Schedule
Consumer Service Manual
Safety Guide
Procedures
</div></li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">News & Media</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
Tender
Press Release
Jobs
</div>
</li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">Downloads</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
For Customer
For Employee
</div></li>
<li><a href="#" >FAQs</a></li>
<li>
<a href="#"
onmouseover="mopen('m5')"
onmouseout="mclosetime()">Usefull Links</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
About Us
GEPCO BoD
Top Management
Organizational Chart
Telephone Directory
Consumer
Existing Stuff Strength
</div>
</li>
</ul>
</div>
CSS code
<style type="text/css">
#sddm
{
margin-top:135px;
padding:0;
}
#sddm li
{
padding:0;
list-style: none;
float: left;
font: bold 11px arial;
}
#sddm li a
{ display: block;
margin: 0 0 0 0;
border:none;
padding: 4px 10px;
height:20px;
width: 100px;
background: #5970B2 url('index/blue.png');
color: #FFF;
text-align: center;
text-decoration: none;
}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
margin-left:0px;
background: #49A3FF;
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 0;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style>
JAVASCRIPT code
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id) {
// cancel close timer
mcancelclosetime();
// close old layer
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime() {
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-o
ut
document.onclick = mclose;
As you are using position:absolute to your div, it's depend on it's parent as well. Make sure that you have a div or any other parent that have position:relative and go with top:135px; instead of margin-top.
`http://jsfiddle.net/XUWmx/`
check it if this work for you !