Move DIV when opening Nav menu Jquery Bootstrap

Asked

Viewed 88 times

1

I would like to move the div below the menu, so I choose some option from it.

var cbpHorizontalMenu = (function() {
  var b = $("#cbp-hrmenu > ul > li"),
    g = b.children("a"),
    c = $("body"),
    d = -1;

  function f() {
    g.on("click", a);
    b.on("click", function(h) {
      h.stopPropagation()
    })
  }

  function a(j) {
    if (d !== -1) {
      b.eq(d).removeClass("cbp-hropen")
    }
    var i = $(j.currentTarget).parent("li"),
      h = i.index();
    if (d === h) {
      i.removeClass("cbp-hropen");
      d = -1
    } else {
      i.addClass("cbp-hropen");
      d = h;
      c.off("click").on("click", e)
    }
    return false
  }

  function e(h) {
    b.eq(d).removeClass("cbp-hropen");
    d = -1
  }
  return {
    init: f
  }
})();
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,
html {
  font-size: 100%;
  padding: 0;
  margin: 0;
}


/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #ED3237;
}

.container>header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container>header {
  padding: 2.875em 1.875em 1.875em;
}

.container>header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0 0 0.6em 0;
  float: left;
  font-weight: 400;
}

.container>header>span {
  display: block;
  position: relative;
  z-index: 9999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container>header>span span:after {
  width: 30px;
  height: 30px;
  left: -12px;
  font-size: 50%;
  top: -8px;
  font-size: 75%;
  position: relative;
}

.container>header>span span:hover:before {
  content: attr(data-content);
  text-transform: none;
  text-indent: 0;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 110%;
  padding: 0.8em 1em;
  line-height: 1.2;
  text-align: left;
  left: auto;
  margin-left: 4px;
  position: absolute;
  color: #fff;
  background: #ED3237;
}

.container>header nav {
  float: right;
  text-align: center;
}

.container>header nav a {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.1em;
  border: 4px solid #ED3237;
}

.container>header nav a>span {
  display: none;
}

.container>header nav a:hover:before {
  content: attr(data-info);
  color: #ED3237;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  pointer-events: none;
}

.container>header nav a:hover {
  background: #ED3237;
}

.bp-icon:after {
  font-family: 'bpicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  color: #ED3237;
  -webkit-font-smoothing: antialiased;
}

.container>header nav .bp-icon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2;
  text-indent: 0;
}

.container>header nav a:hover:after {
  color: #fff;
}

.bp-icon-next:after {
  content: "\e000";
}

.bp-icon-drop:after {
  content: "\e001";
}

.bp-icon-archive:after {
  content: "\e002";
}

.bp-icon-about:after {
  content: "\e003";
}

.bp-icon-prev:after {
  content: "\e004";
}

@media screen and (max-width: 55em) {
  .container>header h1,
  .container>header nav {
    float: none;
  }
  .container>header>span,
  .container>header h1 {
    text-align: center;
  }
  .container>header nav {
    margin: 0 auto;
  }
  .container>header>span {
    text-indent: 30px;
  }
}

.cbp-hrmenu {
  width: 100%;
  margin-top: 2em;
  border-bottom: 2px solid #ED3237;
}


/* general ul style */

.cbp-hrmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/* first level ul style */

.cbp-hrmenu>ul,
.cbp-hrmenu .cbp-hrsub-inner {
  width: 90%;
  max-width: 70em;
  margin: 0 auto;
  padding: 0 1.875em;
}

.cbp-hrmenu>ul>li {
  display: inline-block;
}

.cbp-hrmenu>ul>li>a {
  font-weight: 700;
  padding: 1em 2em;
  color: #999;
  display: inline-block;
}

.cbp-hrmenu>ul>li>a:hover {
  color: #ED3237;
}

.cbp-hrmenu>ul>li.cbp-hropen a,
.cbp-hrmenu>ul>li.cbp-hropen>a:hover {
  color: #fff;
  background: #ED3237;
}


/* sub-menu */

.cbp-hrmenu .cbp-hrsub {
  display: none;
  position: absolute;
  background: #ED3237;
  width: 100%;
  left: 0;
}

.cbp-hropen .cbp-hrsub {
  display: block;
  padding-bottom: 3em;
  z-index: 9999;
}

.cbp-hrmenu .cbp-hrsub-inner>div {
  width: 33%;
  float: left;
  padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
  content: " ";
  display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
  clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner>div a {
  line-height: 2em;
}

.cbp-hrsub h4 {
  color: #FFFFFF;
  padding: 2em 0 0.6em;
  margin: 0;
  font-size: 160%;
  font-weight: 300;
}


/* Examples for media queries */

@media screen and (max-width: 52.75em) {
  .cbp-hrmenu {
    font-size: 80%;
  }
}

@media screen and (max-width: 43em) {
  .cbp-hrmenu {
    font-size: 120%;
    border: none;
  }
  .cbp-hrmenu>ul,
  .cbp-hrmenu .cbp-hrsub-inner {
    width: 100%;
    padding: 0;
  }
  .cbp-hrmenu .cbp-hrsub-inner {
    padding: 0 2em;
    font-size: 75%;
  }
  .cbp-hrmenu>ul>li {
    display: block;
    border-bottom: 4px solid #ED3237;
  }
  .cbp-hrmenu>ul>li>a {
    display: block;
    padding: 1em 3em;
  }
  .cbp-hrmenu .cbp-hrsub {
    position: relative;
  }
  .cbp-hrsub h4 {
    padding-top: 0.6em;
  }
}

@media screen and (max-width: 36em) {
  .cbp-hrmenu .cbp-hrsub-inner>div {
    width: 100%;
    float: none;
    padding: 0 2em;
  }
}
<div class="main" style="text-align:center;">
  <nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
      <li>
        <a style="color:#000;" href="#">Últimas Notícias</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Regional</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Cidades</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Brasil</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Política</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Esportes</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Cultura</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

    </ul>
  </nav>
</div>
</div>

<!-- Logo Start -->

<div class="container" style="margin-bottom:1%; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #ED3237;">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4" id="logo">
      <img src="https://ogimg.infoglobo.com.br/in/14638550-9ee-f9a/FT1086A/420/x20141123-125719.jpg.pagespeed.ic.Z5_e4u1qRW.jpg" alt="Foca" class="img-responsive displayed" width="70%"> <br>
    </div>
    <div class="col-md-4"></div>
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <script>
    $(function() {
      cbpHorizontalMenu.init();
    });
  </script>

Code in https://codepen.io/hrmaker/pen/RQWqBa

At the moment, I put the z-index, it opens above the image.

I need research suggestions, please.

jquery bootstrap

  • Whenever possible, choose to include your code in the question rather than on another site.

  • I thought it would be too big, so I put in the codepen. Anyway, thanks for the tip.

  • Now edit your question trying to be more precise in what you want to do and pointing out what error you are encountering.

  • There is no "error" actually. As I explained above, I would like to move the div below, which has a "seal", as soon as the menu opens. The way it is, it goes over the image. I asked the question, because I do not know how to research this function.

1 answer

0


When opening the submenu, you should adjust the position of the div .container (where is the "seal") for a value that is below the submenu. For this, just calculate the height of the submenu and apply the top with position: relative. When closing the submenu, return to the position of the div for 0.

See in the example below with the added commented code:

function adjContainer(i){
   var menu_mob = $("nav.cbp-hrmenu ul li").width(); // largura do menu
   var menu_ativ = $(".cbp-hropen").length; // conto se existe menu aberto
   
   if(menu_ativ == 0 || menu_mob > window.innerWidth/4){ // verifico se tem algum menu aberto ou é mobile
      $("div.container").css("top","0"); // volto ao normal
   }else{
      //"div.cbp-hrsub"
      var submenu_height = $(i).find("div.cbp-hrsub").outerHeight(); // pego a altura do submenu
      $("div.container").css({ // aplico o top e o position
         "top":submenu_height+"px",
         "position":"relative"
      });
   }
}

$(window).on("resize", adjContainer); // ajusto a "foca" quando a janela for redimensionada

var cbpHorizontalMenu = (function() {
  var b = $("#cbp-hrmenu > ul > li"),
    g = b.children("a"),
    c = $("body"),
    d = -1;

  function f() {
    g.on("click", a);
    b.on("click", function(h) {
      h.stopPropagation()
    })
  }

  function a(j) {
    if (d !== -1) {
      b.eq(d).removeClass("cbp-hropen")
    }
    var i = $(j.currentTarget).parent("li"),
      h = i.index();
    if (d === h) {
      i.removeClass("cbp-hropen");
      d = -1
      adjContainer(); // ajusto a "foca" ao fechar o menu
    } else {
      i.addClass("cbp-hropen");
      d = h;
      c.off("click").on("click", e)
      adjContainer(i); // ajusto a "foca" ao abrir o menu
    }
    return false
  }

  function e(h) {
     b.eq(d).removeClass("cbp-hropen");
    d = -1
  }
  return {
    init: f
  }
})();

$(function() {
      cbpHorizontalMenu.init();
    });
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,
html {
  font-size: 100%;
  padding: 0;
  margin: 0;
}


/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #ED3237;
}

.container>header {
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em 3.125em 1.875em;
}

.container>header {
  padding: 2.875em 1.875em 1.875em;
}

.container>header h1 {
  font-size: 2.125em;
  line-height: 1.3;
  margin: 0 0 0.6em 0;
  float: left;
  font-weight: 400;
}

.container>header>span {
  display: block;
  position: relative;
  z-index: 9999;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  padding: 0 0 0.6em 0.1em;
}

.container>header>span span:after {
  width: 30px;
  height: 30px;
  left: -12px;
  font-size: 50%;
  top: -8px;
  font-size: 75%;
  position: relative;
}

.container>header>span span:hover:before {
  content: attr(data-content);
  text-transform: none;
  text-indent: 0;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 110%;
  padding: 0.8em 1em;
  line-height: 1.2;
  text-align: left;
  left: auto;
  margin-left: 4px;
  position: absolute;
  color: #fff;
  background: #ED3237;
}

.container>header nav {
  float: right;
  text-align: center;
}

.container>header nav a {
  display: inline-block;
  position: relative;
  text-align: left;
  width: 2.5em;
  height: 2.5em;
  background: #fff;
  border-radius: 50%;
  margin: 0 0.1em;
  border: 4px solid #ED3237;
}

.container>header nav a>span {
  display: none;
}

.container>header nav a:hover:before {
  content: attr(data-info);
  color: #ED3237;
  position: absolute;
  width: 600%;
  top: 120%;
  text-align: right;
  right: 0;
  pointer-events: none;
}

.container>header nav a:hover {
  background: #ED3237;
}

.bp-icon:after {
  font-family: 'bpicons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  color: #ED3237;
  -webkit-font-smoothing: antialiased;
}

.container>header nav .bp-icon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2;
  text-indent: 0;
}

.container>header nav a:hover:after {
  color: #fff;
}

.bp-icon-next:after {
  content: "\e000";
}

.bp-icon-drop:after {
  content: "\e001";
}

.bp-icon-archive:after {
  content: "\e002";
}

.bp-icon-about:after {
  content: "\e003";
}

.bp-icon-prev:after {
  content: "\e004";
}

@media screen and (max-width: 55em) {
  .container>header h1,
  .container>header nav {
    float: none;
  }
  .container>header>span,
  .container>header h1 {
    text-align: center;
  }
  .container>header nav {
    margin: 0 auto;
  }
  .container>header>span {
    text-indent: 30px;
  }
}

.cbp-hrmenu {
  width: 100%;
  margin-top: 2em;
  border-bottom: 2px solid #ED3237;
}


/* general ul style */

.cbp-hrmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/* first level ul style */

.cbp-hrmenu>ul,
.cbp-hrmenu .cbp-hrsub-inner {
  width: 90%;
  max-width: 70em;
  margin: 0 auto;
  padding: 0 1.875em;
}

.cbp-hrmenu>ul>li {
  display: inline-block;
}

.cbp-hrmenu>ul>li>a {
  font-weight: 700;
  padding: 1em 2em;
  color: #999;
  display: inline-block;
}

.cbp-hrmenu>ul>li>a:hover {
  color: #ED3237;
}

.cbp-hrmenu>ul>li.cbp-hropen a,
.cbp-hrmenu>ul>li.cbp-hropen>a:hover {
  color: #fff;
  background: #ED3237;
}


/* sub-menu */

.cbp-hrmenu .cbp-hrsub {
  display: none;
  position: absolute;
  background: #ED3237;
  width: 100%;
  left: 0;
}

.cbp-hropen .cbp-hrsub {
  display: block;
  padding-bottom: 3em;
  z-index: 9999;
}

.cbp-hrmenu .cbp-hrsub-inner>div {
  width: 33%;
  float: left;
  padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
  content: " ";
  display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
  clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner>div a {
  line-height: 2em;
}

.cbp-hrsub h4 {
  color: #FFFFFF;
  padding: 2em 0 0.6em;
  margin: 0;
  font-size: 160%;
  font-weight: 300;
}


/* Examples for media queries */

@media screen and (max-width: 52.75em) {
  .cbp-hrmenu {
    font-size: 80%;
  }
}

@media screen and (max-width: 43em) {
  .cbp-hrmenu {
    font-size: 120%;
    border: none;
  }
  .cbp-hrmenu>ul,
  .cbp-hrmenu .cbp-hrsub-inner {
    width: 100%;
    padding: 0;
  }
  .cbp-hrmenu .cbp-hrsub-inner {
    padding: 0 2em;
    font-size: 75%;
  }
  .cbp-hrmenu>ul>li {
    display: block;
    border-bottom: 4px solid #ED3237;
  }
  .cbp-hrmenu>ul>li>a {
    display: block;
    padding: 1em 3em;
  }
  .cbp-hrmenu .cbp-hrsub {
    position: relative;
  }
  .cbp-hrsub h4 {
    padding-top: 0.6em;
  }
}

@media screen and (max-width: 36em) {
  .cbp-hrmenu .cbp-hrsub-inner>div {
    width: 100%;
    float: none;
    padding: 0 2em;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main" style="text-align:center;">
  <nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
      <li>
        <a style="color:#000;" href="#">Últimas Notícias</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Regional</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Cidades</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>
      <li>
        <a style="color:#000;" href="#">Brasil</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Política</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Esportes</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

      <li>
        <a style="color:#000;" href="#">Cultura</a>
        <div class="cbp-hrsub">
          <div class="cbp-hrsub-inner">

            <div>
              <h4>Brasil</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/4b/2018/01/22/o-advogado-cristiano-zanin-martins-d-defensor-do-ex-presidente-luiz-inacio-lula-da-silva-deixa-o-tribunal-regional-federal-da-4-regiao-trf-4-em-porto-alegre-rs-apos-entrega-de-memoriais-a-1516649842651_615x300.jpg"
                      alt="Notícia" class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Regional</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://conteudo.imguol.com.br/c/noticias/31/2018/01/18/18jan2018---ex-presidente-luiz-inacio-lula-da-silva-participa-de-ato-com-intelectuais-e-militantes-de-esquerda-em-sao-paulo-1516322609642_615x300.jpg" alt="Notícia" class="img-responsive"
                    />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>
            <div>
              <h4>Cidades</h4>
              <ul>
                <li>
                  <a href="#"><img src="https://s2.glbimg.com/jxZANsIWr7mbGHDmCSaJbdA6HDw=/0x0:1920x1080/1000x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2018/m/j/LXUjuDRbqrgCxI6cMqBw/cop.jpg" alt="Notícia"
                      class="img-responsive" />Defesa de Lula pede que ele recorra em liberdade em caso de nova condenação</a>
                </li>
              </ul>
            </div>

          </div>
          <!-- /cbp-hrsub-inner -->
        </div>
        <!-- /cbp-hrsub -->
      </li>

    </ul>
  </nav>
</div>
</div>

<!-- Logo Start -->

<div class="container" style="margin-bottom:1%; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #ED3237;">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4" id="logo">
      <img src="https://ogimg.infoglobo.com.br/in/14638550-9ee-f9a/FT1086A/420/x20141123-125719.jpg.pagespeed.ic.Z5_e4u1qRW.jpg" alt="Foca" class="img-responsive displayed" width="70%"> <br>
    </div>
    <div class="col-md-4"></div>
  </div>

  • Very good @dvd, thank you very much. I only have two more questions, if I can help. When I click on the first menu item, the image below fits perfectly. In the other items, the image goes up a little and "eats" a little bit. The other question is, can I make it "smooth" by clicking, the same way we put the smooth scroll on the anchor?

  • It needed a small adjustment that I already corrected in the answer. As for the "soft", you say in relation to the seal?

  • Gently open the menu and move the bottom div the same way. I’ve seen this in some menus, but I don’t have the reference now...

  • Ah yes. I will see here and return you

  • An example: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

  • Look at the following link. I made 2 changes to the CSS and some changes to the JS: https://jsfiddle.net/uysguLr3/

  • It was perfect. I can’t thank you enough! You’re the guy, @dvd !

Show 2 more comments

Browser other questions tagged jquery bootstrap

You are not signed in. Login or sign up in order to post.