Bootstrap Snippet Accordion Menu Horizontal using HTML CSS Bootstrap

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 id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
          data-target=".navbar-collapse">
          <span class="icon-bar"></span> <span class="icon-bar"></span> <span
            class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse">
        <ul id="submenu" class="nav navbar-nav">
          <li class="dropdownEstatic dropdown menu-large">
<a href="#"
            class="dropdown-toggle" data-toggle="dropdown"> Product
              Listing <span class="glyphicon glyphicon-menu-down pull-right"></span>
          </a>
            <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu">
             <div class="container">
    <li>
                <div class="col-sm-6 col-md-3">
                  <a href="#" class="thumbnail"> <img
                    src="http://placehold.it/150x120" />
                  </a>
                </div>
                <div class="col-sm-6 col-md-3">
                  <a href="#" class="thumbnail"> <img
                    src="http://placehold.it/150x120" />
                  </a>
                </div>
                <div class="col-sm-6 col-md-3">
                  <a href="#" class="thumbnail"> <img
                    src="http://placehold.it/150x120" />
                  </a>
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
#columnaColor-3{
    background: #2e373c;
      margin-right: -30px;
}
#top-header-navigation .collapse ul li:after{
    content: '';
    position: absolute;
    top: 18px;
    right: 0;
    display: block;
    height: 20px;
    width: 1px;
    opacity: .15;
    background: rgba(0, 0, 0, 0.7);
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */
     /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#top-header-navigation .collapse ul > li:before {
  content: '';
  position: absolute;
  top: 18px;
  right: -1px;
  display: block;
  height: 20px;
  width: 1px;
  opacity: .35;
  background: rgba(255, 255, 255, 0.8);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Accordion Menu Horizontal"
Bootstrap 3.3.0 Snippet by naviego

Related: See More

Questions / Comments:

"Accordion Menu Horizontal" Bootstrap 3.3.0 Snippet by naviego

Related: See More

Questions / Comments:

"Accordion Menu Horizontal"
Bootstrap 3.3.0 Snippet by naviego