Bootstrap Snippet Sidebar Dropdown with Megamenu using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="http://totoprayogo.com" class="dropdown-toggle" data-toggle="dropdown">Categories <span class="glyphicon glyphicon-tag pull-right"></span></a>
      <ul class="dropdown-menu">
        <li><a href="http://totoprayogo.com" target="_blank">Cameras</a>
          <div class="mega">
            <aside>
              <ul>
                <li><a href="http://totoprayogo.com" target="_blank">Sony</a></li>
                <li><a href="http://totoprayogo.com" target="_blank">Canon</a></li>
                <li><a href="http://totoprayogo.com" target="_blank">Kodak</a></li>
              </ul>
            </aside>
            <div class="featured">
              <img alt="featured-cameras" src="http://cdn.mos.cms.futurecdn.net/c01d303202bc3da34fd86a913ca9cbb6-650-80.jpg"/>
            </div>
            <br clear="all"/>
          </div>
        </li>
        <li><a href="http://totoprayogo.com" target="_blank">Mobile Phones</a>
          <div class="mega">
            <aside>
              <ul>
                <li><a href="http://totoprayogo.com" target="_blank">Sony</a></li>
                <li><a href="http://totoprayogo.com" target="_blank">Samsung</a></li>
                <li><a href="http://totoprayogo.com" target="_blank">LG</a></li>
                <li><a href="http://totoprayogo.com" target="_blank">Xiaomi</a></li>
              </ul>
            </aside>
            <div class="featured">
              <img alt="featured-cameras" src="https://support.apple.com/library/content/dam/edam/applecare/images/en_US/iphone/iphone-6s-colors.jpg"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background:#f0f0f0;
    margin-top: 20px;
}
.nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    background:#fff;
}
.dropdown {
    background:#fff;
    border:1px solid #cccccc;
    border-radius:4px;
    width:300px;    
}
.dropdown-menu>li>a {
    color:#428bca;
}
.dropdown ul.dropdown-menu {
    border-radius:4px;
    box-shadow:none;
    margin-top:20px;
    width:300px;
}
.dropdown ul.dropdown-menu:before {
    content: "";
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 16px;
    z-index: 10;
}
.dropdown ul.dropdown-menu:after {
    content: "";
    border-bottom: 12px solid #ccc;
    border-right: 12px solid transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sidebar Dropdown with Megamenu"
Bootstrap 3.3.0 Snippet by mylastof

Related: See More

Questions / Comments:

"Sidebar Dropdown with Megamenu" Bootstrap 3.3.0 Snippet by mylastof

Related: See More

Questions / Comments:

"Sidebar Dropdown with Megamenu"
Bootstrap 3.3.0 Snippet by mylastof