Bootstrap Snippet Bootstrap Mega Navigation using HTML CSS Javascript

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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
        
            <!-- Mobile toggle button -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <!-- Logo -->
            <a class="brand" href="#"><b>LOGO</b></a>
        
            <!-- Navigation -->
            <nav class="nav-collapse collapse">
                <ul class="nav">
                
                    <li><a href="#top">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <b class="caret"></b></a>                      
                        <ul class="dropdown-menu mega-menu">
    
                            <li class="mega-menu-column">
                            <ul>
                                <li class="nav-header">Mega menu 1</li>
                                <img src="http://placehold.it/150x120">
                                <li><a href="#">Mega-menu link</a></li>
                                <li><a href="#">Mega-menu link</a></li>
                                <li><a href="#">Mega-menu link</a></li>
                                <li><a href="#">Mega-menu link</a></li>
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
/* page style */
a, a:focus, a:active, a:hover, object, embed { outline: none; text-decoration: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
:focus { outline: 0; }
body { background: #333; }    
.brand { padding: 10px 40px !important; }
.navbar { border-bottom: 4px solid #888; }
/* MEGA MENU STYLE
********************************/ 
.mega-menu {
    padding: 10px 0px ! important;
    width: 540px;
  border-radius: 0;
  margin-top: 0px;
    }
    .mega-menu li {
        display: inline-block;
        float: left;
        font-size: 0.94rem;
        padding: 3px 0px;
        }
        .mega-menu li.mega-menu-column {
            margin-right: 20px;
            width: 150px;
            }
            .mega-menu .nav-header {
            padding: 0 !important;
            margin-bottom: 10px;
            display: inline-block;
            width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
// Dropdown Menu Fade    
jQuery(document).ready(function(){
    $(".dropdown").hover(
        function() { $('.dropdown-menu', this).fadeIn("fast");
        },
        function() { $('.dropdown-menu', this).fadeOut("fast");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Mega Navigation"
Bootstrap 2.3.2 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Bootstrap Mega Navigation" Bootstrap 2.3.2 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Bootstrap Mega Navigation"
Bootstrap 2.3.2 Snippet by ASDAFF