I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside(like Facebook's dropdown menu having logout,etc.). But the dropdown isn't working the way it should. I have searched everywhere on StackOverflow and the internet but unable to find a solution. I want to implement it using CSS and JavaScript only, since I don't understand jQuery and other languages.
Here is my fiddle: https://jsfiddle.net/8ahy32yn/9/
The codes I have implemented are as follows:
HTML
<div id="navbar">
<ul>
<li>
Home
</li>
<li>
FAQs
</li>
<li class="user" style="float:right;">
Dropdown
<ul id="UserContent" class="user-content">
<li>
Profile
</li>
<li>
My Gifts</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
CSS
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 55px;
}
li
{
float: left;
}
li a
{
text-decoration: none;
display: block;
padding: 20px 25px;
color: white;
text-align: center;
}
li a:hover
{
background-color: #333333;
}
.user
{
position: relative;
display: inline;
}
.dropbtn
{
cursor: pointer;
}
.user-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.user-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.user-content a:hover
{
background-color: #F1F1F1;
}
.show
{
display:block;
}
JavaScript
function UserDropdown() {
document.getElementById("UserContent").classList.toggle("show");
}
window.onclick = function(event)
{
if (!event.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("user-content");
var i;
for (i = 0; i < dropdowns.length; i++)
{
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
P.S. The Fiddle doesn't even show the dropdown on clicking whereas it shows up on my localhost like this:
Any help would be much appreciated. Thanks. :)
You want something like this ? The behavior you want is currently working, I just apply some CSS to style it better I think.
.show
{
display:block;
width: 245px;
right: 0;
left: auto;
line-height: 30px;
overflow: hidden
}
With height: auto on the ul and removing overflow: hidden on the ul parent you can do it the way you want : See it here
A closing brace is missing in the javascript section, the reason not working in fiddle
This link might help
http://www.w3schools.com/howto/howto_js_dropdown.asp
Related
I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?
So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.
How do you a menubar work properly menubar with the functions:
*Clicking on hamburger-icon will display the nav-links.
*Clicking on nav-links will hide the menubar.
(without using bootstrap, but doing it from scratch)
I understand that many have asked this question. I have looked at many different solutions, with JS and Jquery, and I have encountered several problems because I really dont understand JS or Jquery fully.
This is how far I´ve gotten. Go to my website hung.no so you can see the problem. On my website, you should minimize the window to get to the hamburger bar. Then you should click on that bar. After that click on one of the nav-links. It closes, but when you try to click on the hamburger bar again, it does not work.
//Navbar collapses to menubar
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
//Jquery code ON MY WEBSITE. I cannot display it here.
//This is the source
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
//$(document).ready(function(){
// $(".nav-link").click(function(){
// $(".nav-toggle").hide();
// });
//});
//$(document).ready(function(){
// $(".nav-show").click(function(){
// $(".nav-toggle").show();
// });
//});
/*mobile navbar*/
.topnav .icon {
display: none;
}
.topnav {
overflow: hidden;
background-color: #fff;
width: 100%;
position: fixed;
z-index: 1000;
}
.topnav a {
float: right;
display: block;
color: #000;
padding: 10px 10px;
text-decoration: none;
font-size: 12px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 700px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
#myNavbar{
display: none;
}
}
#media screen and (max-width: 700px) {
.topnav.responsive {
position: fixed;
width: 100%;
top: 0;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none!important;
display: block;
text-align: left;
}
.mob-font-size{
font-size: 22px;
width: 100%;
}
.mob-logo-size{
width: 177px;
height: 260px;
}
}
/*dekstop navbar*/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
z-index: 9999;
}
.float-right-nav{
padding: 8px 15px;
float: right;
}
#myNavbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
display: block;
color: #000;
text-align: center;
text-decoration: none;
}
div.container
{
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
font: 12px Raleway-medium;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
z-index: 1;
cursor: pointer;
}
<!--desktop navbar-->
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img src="svg/navlogo.svg" alt=""></li>
<li class="float-right-nav"><span class="medium">KONTAKT</span></li>
<li class="float-right-nav"><span class="medium">PRIS</span></li>
<li class="float-right-nav"><span class="medium">GARANTIER</span></li>
<li class="float-right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
<!--Mobile navbar the classes nav-link and nav-toggle is used in the Jquery code located in the Javascript-section in this Code Snippet-->
<div class="topnav" id="myTopnav">
<a style="float:left" href="#home"><img src="svg/navlogo.svg" alt="" height="20" width="18"></a>
<a class="nav-link nav-toggle"href="#Kontakt"><span class="medium">KONTAKT</span></a>
<a class="nav-link nav-toggle"href="#Pris"><span class="medium">PRIS</span></a>
<a class="nav-link nav-toggle"href="#Garantier"><span class="medium">GARANTIER</span></a>
<a class="nav-link nav-toggle"href="#Ommeg"><span class="medium">OM MEG</span></a>
☰
</div>
I see a problem in your javascript function "myFunction"
When you click a first time, you append class "resposive", but when you click again the flow moves to "else" and then it remove "responsive" so you are removing that behaviour.
If you remove that flow then the nav works fine.
Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>
The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/
I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.
<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>
When I slideUp() or slideDown() fixed div, it jumps.
I have read that it is height problem, but could not solve it. Maybe there is something I can do with padding?
Need some help :)
http://jsfiddle.net/sirjay/08ypLtp2/
#tab-menu {
text-align: center;
padding-right: 40px;
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
background-color: lightblue;
}
.t-hidden {
display: none;
padding: 10px;
}
$(function() {
$('#tab-menu li > a').click(function(e) {
e.preventDefault();
var x = $(this).closest('li').find('.t-hidden');
if (x.is(':visible')) {
x.slideUp();
} else {
x.slideDown();
}
});
});
<ul id="tab-menu">
<li>
First
<div class="t-hidden">
Hidden 1
</div>
</li>
<li>
Second
<div class="t-hidden">
Hidden 2
</div>
</li>
<li>
Third
<div class="t-hidden">
Hidden 3
</div>
</li>
</ul>
Just add a height and a width to animate smoothly each element you apply slideUp() or slideDown() to.
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
height:90px;
background-color: lightblue;
}
DEMO http://jsfiddle.net/a_incarnati/08ypLtp2/3/
I am using ddlevelsmenu.js from dynamic drive to display menu items on mouseover. everything works fine. just i have one very long list which appears little bit odd. Can i split the list items into different columns?
Below are my HTML codes followed by CSS codes:
<ul>
<li>Indian States</li>
</ul>
The above codes will trigger the below list items on mouseover
<ul id="stts" class="submenustyle">
<li>Andhra Pradesh</li>
<li>Arunachal Pradesh</li>
<li>Assam</li>
<li>Bihar</li>
<li>Chattisgarh</li>
<li>Goa</li>
<li>Gujarat</li>
<li>Haryana</li>
<li>Himachal pradesh</li>
<li>Jammu Kashmir</li>
<li>Jharkhand</li>
<li>Karnataka</li>
<li>Kerala</li>
<li>Madhya Pradesh</li>
<li>Maharashtra</li>
<li>Manipur</li>
<li>Meghalaya</li>
<li>Mizoram</li>
<li>Nagaland</li>
<li>Odisha</li>
<li>Punjab</li>
<li>Rajasthan</li>
<li>Srinagar</li>
<li>Sikkim</li>
<li>Tamil Nadu</li>
<li>Telangana</li>
<li>Uttar Pradesh</li>
<li>Uttaranchal</li>
<li>West Bengal</li>
</ul>
Below are the css codes
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 1.2vw;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 180px; /*width of menu (not including side paddings)*/
color: white;
background-color:#999999;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
.ddsubmenustyle li a:hover{
background-color:#333333;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 180px; /*width of menu (include side paddings of LI A*/
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
have you tried setting widths on the li?
ul{
width:800px;
}
li{
width: 40%;
display: inline-block;
}
this was already answered here: How to display an unordered list in two columns? by Gabriel. Following css should resolve your issue:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
I have created jsfiddle to test it and it works nicely. Have a look http://jsfiddle.net/tralala/jg0zycfw/1/.