CODEWITHSUNDEEP
jquerycsshtmldropdown
Diana
Diana

Reputation: 244

How to do a BOX dropdown with jQuery?

http://www.chesterfield.gov/

I'm not even sure what this type of drop down is called. But I'm hoping someone will know which package/template this uses. Thank you for any help!

Diana

Upvotes: 1

Views: 40

Answers (1)

Logan H
Logan H

Reputation: 3423

It's not a tab view, its a drop down menu with a table instead of <a> tags in the li

See for your self IT IS a dropdown menu

$(document).ready(function() {
  $('.dropdown').hover(
    function() {
      $(this).children('.sub-menu').slideDown(200);
    },
    function() {
      $(this).children('.sub-menu').slideUp(200);
    }
  );
}); // end ready
nav {
  background-color: rgb(255, 100, 100);
  padding: 10px 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
}
/* sub navigation */

nav li ul {
  background-color: rgb(225, 75, 75);
  position: absolute;
  left: 0;
  top: 40px;
  /* make this equal to the line-height of the links (specified below) */
  width: 200px;
}
nav li li {
  position: relative;
  margin: 0;
  display: block;
}
nav li li ul {
  position: absolute;
  top: 0;
  left: 200px;
  /* make this equal to the width of the sub nav above */
  margin: 0;
}
/* style all links */

nav a {
  line-height: 40px;
  padding: 0 12px;
  margin: 0 12px;
}
nav a {
  color: #fff;
  text-decoration: none;
  display: block;
}
nav a:hover,
nav a:focus,
nav a:active {
  color: rgb(50, 50, 50);
}
/* style sub level links */

nav li li a {
  border-bottom: solid 1px rgb(200, 50, 50);
  margin: 0 10px;
  padding: 0;
}
nav li li:last-child a {
  border-bottom: none;
}
/* show arrows for dropdowns */

nav li.dropdown > a {
  background-image: url('../img/arrow-down.png');
  background-position: right 20px;
  background-repeat: no-repeat;
}
nav li li.dropdown > a {
  background-image: url('../img/arrow-right.png');
  background-position: right 16px;
  background-repeat: no-repeat;
}
/* hide sub menu links */

ul.sub-menu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav>
  <ul>
    <li><a href="#">Nav 1</a>
    </li>
    <li><a href="#">Nav 2</a>
    </li>
    <li class="dropdown">
      <a href="#">Nav 3 <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
      <ul class="sub-menu">
        <li>
          <table class="table">
            <thead>
              <tr>
                <th>Header 1</th>
                <th>Header 2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a href="#">Data 1</a>
                </td>
                <td><a href="#">Data 2</a></td>
              </tr>
              <tr>
                <td><a href="#">Data 3</a>
                </td>
                <td><a href="#">Data 4</a></td>
              </tr>
            </tbody>
          </table>

        </li>
      </ul>
    </li>
  </ul>
</nav>
<div class="container">
  Then you have you main body content here and the nav bar above with the drop should look good.
</div>

Upvotes: 2

Related Questions