david david - 3 months ago 5
Javascript Question

fixed header - menu does not drop

Hi i am trying to get a fixed header on scroll working. but when the menu is clicked it just jumps to the top of the page.

The menu in the fixed header should drop the menu as it does in the original header instead of jumping.

scroll down the page in the fiddle for the secondary header to appear.

JS fiddle

https://jsfiddle.net/bs3ag1h8/5/

Script

// HEADER SHRINK
$(window).on('scroll', function() {
if ($(window).scrollTop() > 170) {
$('.fixed-header').show();
} else {
$('.fixed-header').hide();
}
});

// TOGGLE MENU ~ CLICK DIV
$('div.top_header').click(function() {
$('#logo_menu ul').slideDown(300,'easeInOutQuad');
return false;
});

$('#logo_menu a').click(function() {
$(this).parents('ul').not('#logo_menu').slideUp(300,'easeInOutQuad');
return false;
});

$('#logo_menu ul').mouseleave(function() {
$(this).slideUp(300,'easeInOutQuad');
});

// TOGGLE MENU conctact us ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall').click(function (e) {
$(this).next("div").slideDown(200, 'easeOutCirc');
console.log('div clicked');
e.preventDefault();
return false;
});

$('li.mainmenudrop').mouseleave(function () {
$(this).children("div").slideUp(300, 'easeInOutQuad');
});

// TOGGLE MENU login ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall3').click(function (e) {
$(this).next("div").toggle(10, 'easeOutCirc');
console.log('div clicked');
e.preventDefault();
return false;
});

//Main Menu toggle
$('a.dropsmall2').click(function() {
$(this).next('ul').slideDown(300,'easeInOutQuad');
});

$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').slideUp(300,'easeInOutQuad');
});

$('#dropmenu > li').mouseleave(function() {
$(this).children('ul').slideUp(300,'easeInOutQuad');
});

//Remove class and replace with another
/*$("#hover_text2").mouseover(
function() {
$(".bodyfooter_text2").toggleClass("bodyfooter_text2hover");
}); */

$.extend($.easing,
{
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}

});

Answer

You need to make following changes:

  1. remove href="#" from tag <a> of menu headings
  2. you don't need to have 2 different menu codes one that is on top and one that appears on scrolling, you should have only 1 menu and make its position as fixed in css
  3. if you still need second menu that appear on scrolling see the solution here on jsfiddle JSFiddle

See your sweet code in action below :)

// HEADER SHRINK
$(window).on('scroll', function() {
  if ($(window).scrollTop() > 170) {
    $('.fixed-header').show();
  } else {
    $('.fixed-header').hide();
  }
});

// TOGGLE MENU ~ CLICK DIV
$('div.top_header').click(function() {
  $('#logo_menu ul').slideDown(300, 'easeInOutQuad');
  return false;
});

$('#logo_menu a').click(function() {
  $(this).parents('ul').not('#logo_menu').slideUp(300, 'easeInOutQuad');
  return false;
});

$('#logo_menu ul').mouseleave(function() {
  $(this).slideUp(300, 'easeInOutQuad');
});

// TOGGLE MENU conctact us ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall').click(function(e) {
  $(this).next("div").slideDown(200, 'easeOutCirc');
  console.log('div clicked');
  e.preventDefault();
  return false;
});

$('li.mainmenudrop').mouseleave(function() {
  $(this).children("div").slideUp(300, 'easeInOutQuad');
});

// TOGGLE MENU login ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall3').click(function(e) {
  $(this).next("div").toggle(10, 'easeOutCirc');
  console.log('div clicked');
  e.preventDefault();
  return false;
});

//Main Menu toggle
$('a.dropsmall2').click(function() {
  $(this).next('ul').slideDown(300, 'easeInOutQuad');
});

$('#dropmenu a').click(function() {
  $(this).parents('ul').not('#dropmenu').slideUp(300, 'easeInOutQuad');
});

$('#dropmenu > li').mouseleave(function() {
  $(this).children('ul').slideUp(300, 'easeInOutQuad');
});

$.extend($.easing, {
  easeInOutQuad: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  },
  easeOutCirc: function(x, t, b, c, d) {
    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
  },
  easeInOutElastic: function(x, t, b, c, d) {
    var s = 1.70158;
    var p = 0;
    var a = c;
    if (t == 0) return b;
    if ((t /= d / 2) == 2) return b + c;
    if (!p) p = d * (.3 * 1.5);
    if (a < Math.abs(c)) {
      a = c;
      var s = p / 4;
    } else var s = p / (2 * Math.PI) * Math.asin(c / a);
    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
  }

});
.fixed-header {
  background: #FFF;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.5);
  display: none;
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.fixed-header .header-content {
  margin: auto;
  width: 600px;
}
/****Layout*****************************/

.container {
  width: 1130px;
  margin: 0 auto;
  vertical-align: middle;
}
/* TOP HEADER */

.extheader {
  width: 100%;
  background: #fff;
  float: left;
}
.smaller {
  line-height: 10px;
}
.top_header {
  width: 100%;
  margin-top: 10px;
}
.logo {
  cursor: default;
  float: left;
  text-align: left;
  width: 39%;
  z-index: 9999;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 1%;
}
.logoImage {
  max-width: 30%;
  display: block;
}
/* Telephone & request call */

.headerlink {
  float: right;
  width: 59%;
  padding-right: 1%;
  font-family: SourceSansPro-Semibold;
  font-size: 22px;
}
#headerlink,
#headerlink h2 {
  text-decoration: none;
  color: #364C60;
  text-align: right;
  float: right;
  padding-left: 6px;
  color: #217DD1;
}
/* Menu Bar 	position:fixed;
	z-index:99;
	top:55px;*/

.extmenubar {
  width: 100%;
  background: #fff;
  float: left;
}
.menubar {
  width: 98%;
  padding: 0 1% 0 1%;
  float: left;
  border-radius: 0 0 7px 7px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menubarleft {
  float: left;
  width: 80%;
}
.menubarright {
  float: right;
  width: 20%;
}
/* Body */

/*Main Menu*/

.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  z-index: 99;
}
.dropmenu {
  height: 27px;
  width: 600px;
}
.dropmenu li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
}
.dropmenu li a {
  display: block;
  padding: 0 10px 0 5px;
  margin-right: 0px;
  height: 27px;
  line-height: 27px;
  text-decoration: none;
  font-size: 13px;
  font-family: 'SourceSansPro-Semibold';
  color: #000;
}
.dropmenu ul li a {
  font-size: 14px;
  font-family: 'SourceSansPro-Light';
  font-weight: 300px;
}
.dropmenu li:hover a {
  color: #000;
}
.dropmenu ul li:hover > a {
  color: #000;
}
.dropmenu ul li:hover a {
  background: #E1ECF5;
}
/*.dropmenu li:hover a { background: #444489; }*/

.dropmenu li ul {
  border-left: 5px solid #2081D9;
}
/*.dropmenu li ul li:hover a { border-left: 8px solid #ff4200; }*/

.dropmenu ul {
  position: absolute;
  top: 27px;
  left: 10px;
  opacity: 0;
  background: #fff;
  -webkit-transition: opacity 0.1s ease-in-out 0.2s;
  -moz-transition: opacity 0.1s ease-in-out 0.2s;
  -o-transition: opacity 0.1s ease-in-out 0.2;
  -ms-transition: opacity 0.1s ease-in-out 0.2s;
  transition: opacity 0.2s ease-in-out 0.2s;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 2px 2px;
  display: none;
}
.dropmenu li:hover > ul {
  opacity: 1;
}
.dropmenu ul li {
  height: 0;
  overflow: hidden;
  -webkit-transition: height .3s ease .1s;
  -moz-transition: height .3s ease .1s;
  -o-transition: height .3s ease .1s;
  -ms-transition: height .3s ease .1s;
  transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
  height: 27px;
  line-height: 27px;
  overflow: hidden;
}
.dropmenu ul li a {
  width: 130px;
  padding-left: 11px;
  height: 27px;
  line-height: 27px;
}
.dropmenu ul li:last-child a {
  -webkit-border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  border-radius: 0 0 2px 2px;
  padding-bottom: 20px;
}
.dropmenu ul li:last-child {
  padding-bottom: 3px;
}
.dropmenu li a.liunk {
  background: url(../images/arrowb.gif) no-repeat 6px center;
}
.dropmenu li a.liunk:hover {
  background: url(../images/arrowd.png) no-repeat 6px center;
}
.arrow {
  float: left;
  height: 12px;
  width: 13px;
  margin: 5px 0 0px 0;
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
#dropmenu li:hover #rotate {
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
/*Header menu and shopping cart*/

#mainmenu {
  list-style: none;
}
.mainmenuShopping {
  width: 130px;
  float: right;
  margin-right: 5px;
}
.mainmenuShopping li a {
  color: #000;
}
.mainmenuShopping li:hover a {
  color: #303A44;
}
.mainmenuHeader {
  width: 100%;
  float: right;
}
.mainmenuHeader li a {
  color: #000;
}
.mainmenuHeader li:hover a {
  color: #000000;
}
#mainmenu li {
  float: right;
  display: block;
  position: relative;
  border: none;
  cursor: default;
}
.mainmenuh {
  line-height: 10px;
  height: 15px;
  padding-bottom: 1px;
}
.mainmenus {
  line-height: 27px;
  height: 27px;
}
#mainmenu li a {
  font-size: 11px;
  display: block;
  text-decoration: none;
}
.mainmenufontH {
  font-family: 'SourceSansPro-Light';
}
.mainmenufontS {
  font-family: 'SourceSansPro-Semibold';
}
#mainmenu li .dropsmall,
.dropsmall3 {
  padding: 0 7px 0px 4px;
}
#mainmenu li:first-child .dropsmall {
  padding: 0 1px 0 3px;
}
#mainmenu li:hover .dropsmall {} .dropbox {
  float: right;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  background: #fff;
  display: none;
  z-index: 999999;
}
.dropboxLogin {
  width: 560px;
  padding: 7px 0px 0px 0px;
  right: -161px;
  top: 13px;
  background: #fff;
  z-index: 999;
  float: right;
  font-size: 12px;
}
}
.dropboxLogin p {
  color: #7E5919;
}
.dropboxContact {
  width: 270px;
  border: 1px solid #9AAAB8;
  right: -1px;
  top: 13px;
  z-index: 999999;
}
.dropboxShopping {
  width: 270px;
  border: 1px solid #9AAAB8;
  right: -1px;
  top: 23px;
}
.dropbox_1 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  text-align: left;
}
#mainmenu h2,
#mainmenu h3,
#mainmenu ul li {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 21px;
  font-size: 12px;
  text-align: left;
  color: #111;
}
#mainmenu h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 7px 0 14px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #217DD1;
  text-align: left;
}
#mainmenu p {
  line-height: 16px;
  margin: 0 0 10px 0;
}
#mainmenu li:hover div a {
  font-size: 11px;
  color: #4FA4F9;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
#mainmenu li:hover div a:hover {
  color: #000;
}
#mainmenu li ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
#mainmenu li ul li {
  font-size: 12px;
  line-height: 24px;
  position: relative;
  text-shadow: 0 1px 0 #FFF;
  padding: 0;
  margin: 0;
  float: none;
  text-align: left;
  width: 130px;
}
#mainmenu li ul li:hover {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.arrowb {
  float: left;
  height: 12px;
  width: 13px;
  margin: 5px 3px 0 0;
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
.menubarright li:hover #rotateb {
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bblock1">

  <div style="position: fixed;" class="extmenubar">
    <div class="container">
      <div class="menubar ">
        <div class="menubarleft">
          <!-- Start Menu -->
          <ul class="dropmenu" id="dropmenu">
            <!-- Home 
		<li><a href="#" class="dropsmall2">Home</a>
		</li>-->
            <!-- Shop -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO HOMES</a>
              <ul style="display: none;">
                <li><a href="#">Introduction</a>
                </li>
                <li><a href="#">Innovation</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Services</a>
                </li>
                <li><a href="#">Development</a>
                </li>
                <li><a href="#">Future</a>
                </li>
              </ul>
            </li>
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO ENERGY</a>
              <ul style="display: none;">
                <li><a href="#">Bio Heating</a>
                </li>
                <li><a href="#">Bio Lighting</a>
                </li>
                <li><a href="#">Bio Air </a>
                </li>
                <li><a href="#">Bio Frequency</a>
                </li>
              </ul>
            </li>
            <!-- Business Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO WATER</a>
              <ul style="display: none;">
                <li><a href="#">Whole House Filter</a>
                </li>
                <li><a href="#">Reverse Osmosis</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Portable filters</a>
                </li>
                <li><a href="#">Portable storage</a>
                </li>
                <li><a href="#">Rain water storage</a>
                </li>
              </ul>
            </li>
            <!-- 2nd Close -->
            <!-- 5th Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO GARDEN</a>
              <ul style="display: none;">
                <li><a href="#">Bio Grow system</a>
                </li>
                <li><a href="#">Bio Watering system</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Indoor growing</a>
                </li>
                <li><a href="#">Organic seeds</a>
                </li>
                <li><a href="#">Organic plants</a>
                </li>
              </ul>
            </li>
            <!-- 5th Close -->
            <!-- Business Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO HEALTH</a>
              <ul>
                <li><a href="#">Core health</a>
                </li>
                <li><a href="#">Enzymes</a>
                </li>
                <li><a href="#">Vitamins</a>
                </li>
                <li><a href="#">Minerals</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Protien</a>
                </li>
                <li><a href="#">Detox</a>
                </li>
                <li><a href="#">Body boost</a>
                </li>
              </ul>
            </li>
            <!-- 2nd Close -->
          </ul>
        </div>
        <!-- 6th Open-->
        <div class="menubarright">
          <ul id="mainmenu" class="mainmenuShopping">
            <li class="mainmenudrop mainmenus"><a href="" class="dropsmall mainmenufontS">SHOPPING CART<span class="arrowb" id="rotateb"></span></a>
              <div class="dropbox dropboxShopping">
                <div class="dropbox_1">
                  <h2>Request Call Back</h2>
                  <p style="font-size:11px; margin-left:1px;">Please enter your telephone number and we will contact you shortly.</p>
                  <form action="feedback" accept-charset="utf-8" method="post">
                    <input name="send_email" value="yes" type="hidden">
                    <p>Tel:
                      <input class="menulogininput" name="Telephone" maxlength="25" style="font-size:13px; height: 14px; width:164px; margin-left:1px;" type="text">
                      <input class="btn blue blog" name="" value="Go" style="width:45px; margin-left:2px; font-size:13px; height: 20px; line-height:13px;" type="submit">
                    </p>
                  </form>
                  <h2>Email Us</h2>
                  <form action="feedback" accept-charset="utf-8" method="post">
                    <input name="send_email" value="yes" type="hidden">
                    <p style="font-size:11px;  margin-left:1px;">If you have any questions please email us:</p>
                    <p>Email:
                      <input class="menulogininput" name="Name" size="20" style="font-size:13px; height:14px; width:145px; margin-left:1px;" type="text">
                      <input class="btn blue blog" name="" value="Send" style="width:45px; margin-left:2px; height: 20px; line-height:13px; font-size:13px;" type="submit">
                    </p>
                    <p>
                      <textarea id="textareae" style="width:250px; margin:2px 0px 0px 1px;" name="Questions" cols="1" rows="3"></textarea>
                    </p>
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--End-->
      </div>
    </div>
  </div>


  <div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>i
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>v
  </div>