Bootstrap Snippet layout using HTML CSS 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="//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 ---------->
<header class="eaHeader animate">
  <div class="section full-width">
  <div class="content level0">
    <div class="links align-left">
      <a href="#" class="link current am-here">Home</a>
      <a href="#" class="link">Business</a>
      <a href="#" class="link">About us</a>
      <a href="#" class="link">Blog</a></div>
    <div class="links align-right">
      <a href="#" class="link">My Account</a><a href="#" class="link">State<span class="icon-chevronDown  no-underline"></span></a><a href="#" class="link search"><span class="icon-search"></span></a></div>
  </div>
  </div>
  <div class="section search-wrapper  full-width">
    <div class="search-bar animate">
    <input class="search-input" type="text" placeholder="Search" />
      
  <button class="btn btn-quaternary"><span class="icon-ctaArrow"></span></button>
    </div>
  </div>
  <div class="content level1">
    <div class="eaLogo align-left "></div>
    <div class="links align-right">
      <a href="#" id="megaElecAndGas" class="link level1 current-page"><span>Electricity and gas </span><span class="icon-chevronDown"></span></a>
      <a href="#" id="megaSolarAndBatteries" class="link level1">Solar and batteries <span class="icon-chevronDown"></span></a>
      <a href="#" id="megaBillsAndAccounts" class="link level1">Bills and accounts <span class="icon-chevronDown"></span></a>
      <a href="#" id="megaHelpAndSupport" class="link level1">Help and support <span class="icon-chevronDown"></span></a>
      <a href="#" class="link level1">State<span class="icon-chevronDown"></span></a>
    </div>
  </div>
  <div class="content level2">
    <div class="megaMenu">
      <div class="megaLinks megaElecAndGas ">
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
/* Am linking to external css */
/* ea fonts */
/* http://codepen.io/chrismoore/pen/jyqrpL */
/* ea icons */
/* http://codepen.io/chrismoore/pen/XpdKwy */
/* section banners */
/* http://codepen.io/chrismoore/pen/RKqwWv */
/* components - three column  */
/* http://codepen.io/chrismoore/pen/xgBOML */
/* points program */
/* http://codepen.io/chrismoore/pen/apxbaB */
/* Buttons and links */
/* http://codepen.io/chrismoore/pen/bqVNmB */
/* breakpoint overlay */
/* https://codepen.io/chrismoore/pen/QvjXdy */
/* grid overlay widget */
/* https://codepen.io/chrismoore/pen/gWwOQB */
/* common styles */
.animate {
   -webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-ms-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out; 
transition: all 350ms ease-in-out;
 transition: all 350ms ease-in-out; 
}
body {
  padding-top: 127px;
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).ready(function() {
  var menuToShow;
  var level0Hover = false;
  var level1Hover = false;
  var navOffset = 127;
  
  $(".level0 .link").on('click', function() {
    $(".level0 .current-page").removeClass("current-page");
    $(this).addClass("current-page");
  });
  $(".level0 .link.search").on('click', function() {
    $(".search-bar").toggleClass("reveal");
    $(".search").toggleClass("open");    
  $( ".search-input" ).focus();
  });
  
  $(".level1 .link").mouseenter(function() {
    level0Hover = true;
    menuToShow = $(this).attr('id');
    if (!$(this).hasClass("active")) {
      $(" .reveal").removeClass("reveal");
      $("." + menuToShow).addClass("reveal");
    }
    $(".level1 .active").removeClass("active");
    $(this).addClass("active");
  });
  $( ".level1 .link" ).click(function() {
    $(".level1 .current-page").removeClass("current-page");
      $(this).addClass("current-page");
});
  $( ".level1 .link" ).dblclick(function() {
    menuToShow = $(this).attr('id');
      $(this).toggleClass("super-reveal");
      $("." + menuToShow).toggleClass("super-reveal");
});
  $(".megaLinks").mouseenter(function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout"
Bootstrap 3.0.0 Snippet by evarevirus