Bootstrap Snippet Multii Column Dropdowns using HTML CSS Bootstrap jQuery

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 ---------->
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
   <div class="row iwu-red"  id="header_row">  
    
             <div id="logoHeader">
                  <img class="logo" src="https://libapps.s3.amazonaws.com/accounts/13288/images/IWU_JLB.png">
                 <div class="navbar-right">
                     <div class="topLinks dropdown-menu" style="padding:17px;">
                             <script>
                                springshare_widget_config_1542316153753 = {  };
                            </script>
                            <div id="s-lg-widget-1542316153753"></div>
                                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://lgapi-us.libapps.com/widgets.php?site_id=494&widget_type=7&widget_embed_type=1&output_format=1&search_box_type=1&group_id=7312&placeholder_text=Search+library+website...&button_text=Search&widget_height=&widget_width=250&config_id=1542316153753";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","s-lg-widget-script-1542316153753");</script>
                            </div>
                     <ul class="nav navbar-nav topLinks">
                         <li class="topLinks"><a href="https://oak.indwes.edu/patroninfo~S0/">My Library Account</a></li>
                         <li class="topLinks"><a onclick="return SnapABug.startLink();">Chat</a></li>
                         <li class="topLinks"><a href="https://indwes.libguides.com/researchservices">Contact Us</a></li>
                        <!-- <li class="topLinks dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin"><span class="glyphicon glyphicon-search icon-size"></span></a>
                            <div class="topLinks dropdown-menu" style="padding:17px;">
                             <script>
                                springshare_widget_config_1542316153753 = {  };
                            </script>
                            <div id="s-lg-widget-1542316153753"></div>
                                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://lgapi-us.libapps.com/widgets.php?site_id=494&widget_type=7&widget_embed_type=1&output_format=1&search_box_type=1&group_id=7312&placeholder_text=Search+library+website...&button_text=Search&widget_height=&widget_width=250&config_id=1542316153753";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","s-lg-widget-script-1542316153753");</script>
                            </div>
                        </li> -->
                     </ul>
                 </div>
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
/*---------Main Code --------*/
html, body {
    margin: 0px;
    padding: 0px;                         
    border: 0px;
    font: inherit;
    vertical-align: baseline;
    font-family: Open Sans,Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    color: #484848;
}
.caret{
    border-width: 6px;
    color:white;
}
.btn .caret {
    margin-left: 10px;
}
.row {
    margin-right: 0px!important;
    margin-left: 0px!important;
}
/*----------Header Code ------------*/
a:active {
    outline: none;
}
#s-lg-guide-tabs-title-bar {
    display: none;
}
.row.iwu-red {
    background-color: #a6192e;
}
.iwu-gray {
    background-color:#737373;
    padding-left:30%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
  jQuery(document).ready(function(){
    $(".dropdown").hover(
      function() { $('.dropdown-menu', this).stop().fadeIn("fast");
        },
      function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
  });
});
$('.dropdown-toggle').click(function(e) {
  if ($(document).width() > 768) {
    e.preventDefault();
    var url = $(this).attr('href');
       
    if (url !== '#') {
    
      window.location.href = url;
    }
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multii Column Dropdowns"
Bootstrap 3.3.0 Snippet by pchilders

Related: See More

Questions / Comments:

"Multii Column Dropdowns" Bootstrap 3.3.0 Snippet by pchilders

Related: See More

Questions / Comments:

"Multii Column Dropdowns"
Bootstrap 3.3.0 Snippet by pchilders