Bootstrap Snippet navbar-re2 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/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<main class="container">
  <header>
    <nav class="navbar-menu">
      
      <!-- Menu normal -->
      <ul class="menu">
  <li><a>Home</a> </li>
  <li><a>Menu 1</a></li>
  <li><a>Menu 2</a>
    <ul class="submenu three">
      <li><a>Submenu 1</a></li>
      <li><a>Submenu 2</a></li>
    </ul>
  </li>
  <li><a>Menu 3</a></li>
  <li><a>About</a>
    <ul class="submenu five">
      <li><a>Contact me</a></li>
      <li><a>About me</a></li>
    </ul>
  </li>
</ul>
      
      <!-- Mini Menu -->
      <nav class="navbar-mini-menu">
        <div class="menu-select">
          <span class="menu-actual">
            Menu
          </span>
          <span class="btn-select">
            
          </span>
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
* {
  margin: 0;
  padding: 0;
}
body, html {
  font-family: segoe ui;
  font-size: 100%;
  height: 100%;
}
/* ****************************************************
                        CONTENEDOR
******************************************************/
.container {
  background: url("http://subtlepatterns.com/patterns/ricepaper.png");
  min-height: 100%;
  overflow: auto;
}
/* ENLACES */
a {
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  transition: background-color .16s ease-in;
}
a:hover {
  background-color: #CD5C5C;
}
/* **************************************************
        BARRA DE NAVEGACION Y MENU NORMAL
****************************************************/
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
$(document).on("ready",function() {
  // 0 = hide, 1 = visible
  var menuState = 0;
  //if($(".mini-menu-options").is(":hidden")) {
    /* Add a Click event listener to btn-select */
    $(".btn-select").on("click",function() {
      if(menuState === 0) {
        $(".mini-menu-options").slideDown("slow");
        menuState = 1;
      } else {
        $(".mini-menu-options").slideUp("slow");
        menuState = 0;
      }
    });
  //}
  $(".mini-menu-options li").on("click", function() {
    var numHijos = $(this).children().length;
    if(numHijos < 2) {
      // hide the menu
      $(".mini-menu-options").hide("fast");
      var texto = $(this).text();
      $(".menu-select .menu-actual").text(texto);
    }
    menuState = 0;
  });
});
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"navbar-re2"
Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"navbar-re2" Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"navbar-re2"
Bootstrap 3.0.0 Snippet by jeevan123456