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

Question

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">
        <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
          <li><a href="#">Web hosting</a></li>
          <li><a href="#">Web builder</a></li>
          <li><a href="#">Themes</a></li>
        </ul>

      </div>
      <div class="column">
        <ul>
          <li><a href="#">Web hosting</a></li>
          <li><a href="#">Web builder</a></li>
          <li><a href="#">Themes</a></li>
        </ul>
      </div>
  </ul>
</div>

I suggest you to use angular js custom directives. From that we can create something which you have expecting and it reusable too. — Libin C Jacob, Aug 31 '17 at 06:19

Max · Answer 1 · 2017-08-31T07:02:40.677

0

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">
    <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
        <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></li>
        </ul>

    </div>
       <div class="column2">
       <ul>
            <li><a href="#">Web hosting</a></li>
            <li><a href="#">Web builder</a></li>
            <li><a href="#">Themes</a></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

edited Aug 31 '17 at 07:02

answered Aug 31 '17 at 06:24

Max

70
7

i need columns vertically side by side – Mkoli Aug 31 '17 at 06:31
oh so u mean like this web hosting1 web hosting2 web builder1 web builder2 ? – Max Aug 31 '17 at 06:33
so there will be something below host, builder and themes? – Max Aug 31 '17 at 06:36
Nope.. no host no builder and no themes – Mkoli Aug 31 '17 at 06:43
@Mkoli i edited my answer above check this ! hope it's what u want – Max Aug 31 '17 at 07:03

mayank bisht · Answer 2 · 2017-08-31T07:35:43.990

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><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
        </ul>
    </td>
    <td>
        <ul class="link-format">
            <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></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.

If I fulfilled your requirement, could you please upvote & mark this as an accepted answer. — mayank bisht, Aug 31 '17 at 07:11
It's because you have `1 reputation`. Your vote will not reflect.Anyways it's okay. — mayank bisht, Aug 31 '17 at 07:25
hey, i need headings like in image top stories and other stories — Mkoli, Aug 31 '17 at 07:27
I have updated `JsFiddle` code, please have a look, and I would suggest you to learn `HTML`, `CSS`. — mayank bisht, Aug 31 '17 at 07:35

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

2 Answers2