We Keep Coding

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>

if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css

I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.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;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

Most efficient way to create a slide-down submenu in jQuery

I am trying to make a submenu which slides down from the main menu bar when hovering over a certain element. I am currently doing this using the following code:
$(document).ready( function() {
$('.navlist li a').hover( function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
$('#subnavbar-' + $(this).attr( 'data-slug' )).slideDown( 200 );
}
}, function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
var name = '#subnavbar-' + $(this).attr( 'data-slug' );
setTimeout( function() {
if( !$(name).is(':hover') )
{
$(name).slideUp( 200 );
}
}, 200 );
}
});
});
a {
color: white;
}
.navbar {
background-color: green;
margin-bottom: 0;
height: 30px;
}
ul.navlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.navlist li {
display: block;
width: 100px;
float: left;
}
.subnavbar {
background-color: blue;
margin-top: 0;
height: 20px;
display: none;
}
ul.subnavlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.subnavlist li {
display: block;
width: 80px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
As you can see by running the snippet; it works, but there are lots of bugs that I'm not sure what the best way to iron out are. Firstly, if the user hovers back and forth over the main menu item I don't want the event to be spammed, I could solve this problem using a setTimeout() and clearTimeout() but I'd like a better way if at all possible. Secondly, I'm not sure how best to get the subnavbar not to retract if the user has hovered over it instead of the parent menu item, how I'm doing it at the moment works, but then if the user hovers off, the navbar doesn't retract.

The efficient solution would be using just CSS. Absolutely no JQUERY required! Try this Fiddle.
HTML:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3
<ul>
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</nav>
CSS Code:
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
display: inline-table;
list-style: outside none none;
padding: 0 10px;
position: relative;
}
nav ul::after {
clear: both;
content: "";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
color: #757575;
display: block;
padding: 15px 20px;
text-decoration: none;
}
nav ul ul {
background: none repeat scroll 0 0 #5f6975;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
border-bottom: 1px solid #575f6a;
border-top: 1px solid #6b727c;
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
padding: 5px 10px;
}
nav ul ul li a:hover {
background: none repeat scroll 0 0 #4b545f;
}
nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}

as you told me better css I've made a quick fiddle for you.
Of course you need to polish the style but the "working" is there.
css just:
.container {
height:30px;
background-color:green;
color:#fff;
}
.container > ul {position:relative;}
.container > ul li {
display:inline-block;
margin-right:30px;
}
.container > ul >li > ul {
position:absolute;
left:0;
background-color:blue;
top:0px;
z-index:-1;
}
.container > ul > li:hover > ul {
top:30px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
edited: I change the aproach and insteed of makign the transition with height I've use just top. check it out

to solve your first issue I would recommend using the jQuery plugin Hover Intent. Like the name suggests, this provides an easy way to determine if the user intends to hover over the element and avoids the possibility of spamming the animation by quickly hovering in and out of the element multiple times.
To solve your second issue, if possible, you can add a containing element around both navbar and subnavbar and use that to close the subnavbar when you leave the containing element, if the subnavbar happens to be visible.
HTML:
<div id="containing_element">
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</div>
jQuery:
$(document).ready( function() {
function hoverEnter() {
$('#subnavbar-test').slideDown(200);
}
$('#hoverlink').hoverIntent( hoverEnter );
$('#containing_element').mouseleave(function () {
if($('#subnavbar-test').is(':visible')) {
$('#subnavbar-test').slideUp(200);
}
});
});
Remember to include the script for hover intent as well.

How to toggle the contents of span when clicked?

I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}

One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>

How do I create a wordpress navigation menu which changes the background image on hover?

I saw this website and I like the navigation of the website
ref: http://www.visitvirginiabeach.com
When you hover the mouse over each menu the big picture will change.
I have tried integrate the jQuery with the class but it didn't work at all.
$(".nav-item1").hover(function){
$(".bg-nav").css('background','url('images/bg2.jpg')');
}
Is there any plugin or some advanced jQuery coding that can make this happen?
Any answer is appreciated.
Thank you.

body {
font-family: verdana,arial,sans-serif;
font-size: 20px;
}
#nav,#nav ul{
line-height: 50px;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
a{
background-color: #B7AF0E;
border: 1px solid #B7AF0E;
color: #FFFFFF;
display: block;
padding: 0 5px 0 10px;
text-decoration: none;
}
a:hover{
background-color:#F8EBA5;
color:#77885B;
}
#nav li{ float: left;
position: relative;
}
#nav ul {
position:absolute;
display:none;
}
#nav ul li a {
width: 140px;
float: left;
height: auto;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:6em;
margin:0px 0 0 35px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>`<body>
<ul id="nav">
<li>Home</li>
<li>Testimonials</li>
<li>Gallery
<ul>
<li>Gallery 1
<ul>
<li>Gallery 1.1</li>
<li>Gallery 1.2</li>
</ul>
</li>
<li>Gallery 2
<ul>
<li>Gallery 2.2</li>
<li>Gallery 2.2</li>
</ul>
</li>
<li>Gallery 3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>PHP
<ul>
<li><a href="#">Wordpress</li>
<li><a href="#">Magento</li>
</ul>
</li>
<li>ASP.NET
<ul>
<li>Project 1</li>
<li>project 2</li>
</ul>
</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</body>`

how to center dropdown menu when position is absolute for dropdown menu

my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.

hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>

your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}