Accommodate a closing X of the Bootstrap Menu

Question

Accommodate a closing X of the Bootstrap Menu

Navigation

#1 by (1 votes)

1

I am making a hamburger menu in mobile version (it is displayed when you shrink) and I am having problems with the X when it closes, although everything works well the problem with this menu is that when it opens and the X appears, it becomes misaligned with respect to to the icon on the left of the phone, I would like to know if there is any way that it is aligned too.

Although I also tried to upload it from css, but it does not look good

$(document).ready(function() {
  menu_init();
});

function menu_init() {
  $('.menu').click(function(event) {
    $('body').toggleClass('o');
  })
}

#menu {
  position: absolute;
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
  z-index: 9;
  background-image: transparent;
}

.menu-principal {
  margin-top: 30px;
  font-family: 'Univers';
  font-weight: bold;
  color: #ffffff;
  float: right;
}

.navbar-default .menu-principal a {
  padding: 10px 10px;
  color: #ffffff;
}

.navbar-default .menu-principal>li>a {
  color: #fff;
  text-shadow: initial;
}

.navbar-default .menu-principal>li>a:hover {
  color: #ffd100;
  text-shadow: initial;
}

.navbar-default .menu-principal>.active>a {
  background-color: initial;
  background-image: initial;
  box-shadow: initial;
  color: #ffd100;
}

.navbar-default .menu-principal>.active>a:hover {
  background-color: initial;
  background-image: initial;
  color: #ffd100;
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  background-image: initial;
  box-shadow: initial;
}

.navbar {
  margin-bottom: 0px;
}

.navbar-ex1-collapse>.menu-mobile li {
  height: auto;
  display: block;
  padding: 2px 6px;
}


/*HAMBURGESA RESPONSIVE MENU*/

#linea-telefonica2 i {
  color: #ffd100;
  font-size: 25px;
  float: left;
  padding-left: 8px;
  margin-top: 22px;
}

.logo-img-mobile {
  position: relative;
  z-index: 11;
  top: 22px;
}

.menu {
  height: 50px;
  width: 0px;
  position: absolute;
  right: 50px;
  transition: 0.3s;
  cursor: pointer;
  top: 8px;
}

.menu .bar {
  height: 2px;
  width: 27px;
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 1px;
  transition: 0.4s;
}

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  top: 23px;
  transform: rotate(0deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(2) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(3) {
  top: 23px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

.menu-mobile .btn-registrate-mobile {
  background-color: #e7c73a;
}

.menu-mobile .btn-registrate-mobile a {
  color: #000;
}

.menu-mobile .btn-registrate-mobile a:hover {
  color: #333
}

.menu-mobile .btn-cuenta-mobile a:hover {
  color: #fff
}

.menu-mobile i {
  z-index: 13;
  position: relative;
  color: #fff;
  float: left;
  margin-left: 3px;
  margin-right: 7px;
  margin-top: 11px;
  font-size: 16px;
}


/************************************************************************************/


/******************************MENU FIJO SCROLL**********************************/


/***********************************************************************************/

.menu-fixed {
  background-color: #000;
  height: 66px;
}

.menu-fixed img {
  margin-top: 5px;
}

.menu-fixed .menu-scroll ul {
  float: right;
  margin-top: 23px;
}

.menu-fixed .menu-scroll ul li {
  list-style: none;
  display: inline-block;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  display: block;
}

.menu-fixed .menu-scroll ul>.active>a {
  color: #ffd100;
}

.menu-fixed .menu-scroll ul li a {
  padding: 0px 8px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.menu-fixed .menu-scroll ul li a:hover {
  color: #ffd100;
}


/*-------------------------------------------*/

.dropdown-menu {
  right: 0;
  left: inherit;
}

.menu-fixed .menu-scroll .dropdown-menu {
  background-color: black;
  padding: 5px 10px;
  position: absolute;
  right: 0px;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  padding: 5px 0px;
  font-size: 12px;
}

.menu-fixed .menu-scroll .dropdown-menu a:hover {
  background: black;
  color: #ffd100;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile {
  background-color: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a {
  background: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a:hover {
  color: #fff;
}

.logo-mobile {
    background-color: #000;
    margin-bottom: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >


<header>
  <!-- MENU PRINCIPAL MOBILE-->
  <div class="navbar-header logo-mobile">
    <div class="col-xs-3 col-sm-2 col-md-5 hidden-sm hidden-lg hidden-md" id="linea-telefonica2">
      <a href=""><i class="fa fa-phone" aria-hidden="true"></i></a>
    </div>
    <!-- LOGO -->
    <div class="col-xs-6 col-sm-12 col-md-3 col-lg-1  hidden-sm hidden-md hidden-lg">
      <a class="navbar-brand" style="width: 65px; height: 63px;" href="index.html">
        <img class="center-block logo-img-mobile" src="http://qkstudiodemo.com/pagofacil/v1/images/logo-pf-header-mobile.svg" alt="Logo de Pago Facil">
      </a>
    </div>
    <div class="col-xs-3 col-sm-12 col-md-3 col-lg-1 hidden-sm hidden-md hidden-lg">
      <!-- HAMBURGESA -->
      <div class="menu" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"> </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-1 sin-padding hidden-sm hidden-md hidden-lg">

    <!-- MENU PRINCIPAL MOBIEL -->
    <div class="collapse navbar-collapse navbar-ex1-collapse sin-padding ">
      <ul class="nav navbar-nav menu-mobile hidden-lg hidden-md hidden-sm">
        <li class="dropdown active">
          <a href="#">SERVICIOS</a>
        </li>
        <li>
          <a href="#">¿QUÉ PUEDO PAGAR?</a>
        </li>
        <li>
          <a href="#">IMPRIMÍ TU FACTURA</a>
        </li>
        <li>
          <a href="envio-dinero.html">ENVIO DE DINERO</a>
        </li>
        <li>
          <a href="novedades.html">NOVEDADES</a>
        </li>
        <li>
          <a href="contacto.html">CONTACTO</a>
        </li>
        <li>
          <i class="fa fa-search mostrar" aria-hidden="true" style="color:#fff;cursor: pointer;"></i>
        </li>
      </ul>

      <!-- Menu de contactos -->
      <ul class="nav navbar-nav navbar-right menu-mobile menu-iconos hidden-lg hidden-md hidden-sm" style="background-color: #333333;border-top: 3px solid #ba237f;">
        <li>
          <a href="#">¿QUÉ ES PAGO FÁCIL?</a>
        </li>
        <li>
          <i class="fa fa-question" aria-hidden="true"></i><a href="#">PREGUNTAS FRECUENTES</a>
        </li>
        <li>
          <i class="fa fa-map-marker" aria-hidden="true"></i><a href="locales.html">SUMÁ TU LOCAL</a>
        </li>
        <li>
          <i class="fa fa-files-o" aria-hidden="true"></i><a href="">SUMÁ TU EMPRESA</a>
        </li>
        <li class="btn-registrate-mobile">
          <a href="">REGISTRATE</a>
        </li>
        <li class="btn-cuenta-mobile">
          <a href="">MI CUENTA</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- /MENU PRINCIPAL MOBILE-->


</header>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

javascript jquery html css3 css

asked by MarianoF 08.05.2018 в 17:17

source

1 answer

Angular 5 delete sibling components when starting Absolute path md5sum

score 1 · Accepted Answer

The problem is in this part of the CSS:

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  top: 23px;
  transform: rotate(0deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(2) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(3) {
  top: 23px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

What is done is that when you click on the menu, all the bars are "joined" in the central and rotated to form the X. Then they will have the vertical position of the central bar. What you can do is either make the bars join the upper bar (instead of the central bar) or move the bars at the end of the animation so that the X raises its position a bit.

The first option is simpler because you only need to change the top from 23px to 14px and the problem is solved. But if you also want to see something better, you should change the animations of the first and second bars. That way you can see something cleaner:

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(2) {
  transform: rotate(0deg);
  top: 14px;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(3) {
  top: 14px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

Here you can see it working:

$(document).ready(function() {
  menu_init();
});

function menu_init() {
  $('.menu').click(function(event) {
    $('body').toggleClass('o');
  })
}

#menu {
  position: absolute;
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
  z-index: 9;
  background-image: transparent;
}

.menu-principal {
  margin-top: 30px;
  font-family: 'Univers';
  font-weight: bold;
  color: #ffffff;
  float: right;
}

.navbar-default .menu-principal a {
  padding: 10px 10px;
  color: #ffffff;
}

.navbar-default .menu-principal>li>a {
  color: #fff;
  text-shadow: initial;
}

.navbar-default .menu-principal>li>a:hover {
  color: #ffd100;
  text-shadow: initial;
}

.navbar-default .menu-principal>.active>a {
  background-color: initial;
  background-image: initial;
  box-shadow: initial;
  color: #ffd100;
}

.navbar-default .menu-principal>.active>a:hover {
  background-color: initial;
  background-image: initial;
  color: #ffd100;
}

.navbar-default {
  background-color: transparent;
  border-color: transparent;
  background-image: initial;
  box-shadow: initial;
}

.navbar {
  margin-bottom: 0px;
}

.navbar-ex1-collapse>.menu-mobile li {
  height: auto;
  display: block;
  padding: 2px 6px;
}


/*HAMBURGESA RESPONSIVE MENU*/

#linea-telefonica2 i {
  color: #ffd100;
  font-size: 25px;
  float: left;
  padding-left: 8px;
  margin-top: 22px;
}

.logo-img-mobile {
  position: relative;
  z-index: 11;
  top: 22px;
}

.menu {
  height: 50px;
  width: 0px;
  position: absolute;
  right: 50px;
  transition: 0.3s;
  cursor: pointer;
  top: 8px;
}

.menu .bar {
  height: 2px;
  width: 27px;
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: 1px;
  transition: 0.4s;
}

.menu .bar:nth-of-type(1) {
  top: 14px;
  transition: 0.3s ease 0.3s;
}

.menu .bar:nth-of-type(2) {
  top: 23px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.menu .bar:nth-of-type(3) {
  top: 32px;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
}

.o .menu {
  transition: transform 0.3s ease 0.5s;
  transform: rotate(45deg);
}

.o .menu .bar:nth-of-type(1) {
  opacity: 0;
}

.o .menu .bar:nth-of-type(2) {
  transform: rotate(0deg);
  top: 14px;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.o .menu .bar:nth-of-type(3) {
  top: 14px;
  transform: rotate(90deg);
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.7s;
}

.menu-mobile .btn-registrate-mobile {
  background-color: #e7c73a;
}

.menu-mobile .btn-registrate-mobile a {
  color: #000;
}

.menu-mobile .btn-registrate-mobile a:hover {
  color: #333
}

.menu-mobile .btn-cuenta-mobile a:hover {
  color: #fff
}

.menu-mobile i {
  z-index: 13;
  position: relative;
  color: #fff;
  float: left;
  margin-left: 3px;
  margin-right: 7px;
  margin-top: 11px;
  font-size: 16px;
}


/************************************************************************************/


/******************************MENU FIJO SCROLL**********************************/


/***********************************************************************************/

.menu-fixed {
  background-color: #000;
  height: 66px;
}

.menu-fixed img {
  margin-top: 5px;
}

.menu-fixed .menu-scroll ul {
  float: right;
  margin-top: 23px;
}

.menu-fixed .menu-scroll ul li {
  list-style: none;
  display: inline-block;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  display: block;
}

.menu-fixed .menu-scroll ul>.active>a {
  color: #ffd100;
}

.menu-fixed .menu-scroll ul li a {
  padding: 0px 8px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.menu-fixed .menu-scroll ul li a:hover {
  color: #ffd100;
}


/*-------------------------------------------*/

.dropdown-menu {
  right: 0;
  left: inherit;
}

.menu-fixed .menu-scroll .dropdown-menu {
  background-color: black;
  padding: 5px 10px;
  position: absolute;
  right: 0px;
}

.menu-fixed .menu-scroll .dropdown-menu li {
  padding: 5px 0px;
  font-size: 12px;
}

.menu-fixed .menu-scroll .dropdown-menu a:hover {
  background: black;
  color: #ffd100;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile {
  background-color: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a {
  background: #ffd100;
  color: black;
}

.menu-fixed .menu-scroll .dropdown-menu .btn-registrate-mobile a:hover {
  color: #fff;
}

.logo-mobile {
    background-color: #000;
    margin-bottom: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >


<header>
  <!-- MENU PRINCIPAL MOBILE-->
  <div class="navbar-header logo-mobile">
    <div class="col-xs-3 col-sm-2 col-md-5 hidden-sm hidden-lg hidden-md" id="linea-telefonica2">
      <a href=""><i class="fa fa-phone" aria-hidden="true"></i></a>
    </div>
    <!-- LOGO -->
    <div class="col-xs-6 col-sm-12 col-md-3 col-lg-1  hidden-sm hidden-md hidden-lg">
      <a class="navbar-brand" style="width: 65px; height: 63px;" href="index.html">
        <img class="center-block logo-img-mobile" src="http://qkstudiodemo.com/pagofacil/v1/images/logo-pf-header-mobile.svg" alt="Logo de Pago Facil">
      </a>
    </div>
    <div class="col-xs-3 col-sm-12 col-md-3 col-lg-1 hidden-sm hidden-md hidden-lg">
      <!-- HAMBURGESA -->
      <div class="menu" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"> </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-3 col-lg-1 sin-padding hidden-sm hidden-md hidden-lg">

    <!-- MENU PRINCIPAL MOBIEL -->
    <div class="collapse navbar-collapse navbar-ex1-collapse sin-padding ">
      <ul class="nav navbar-nav menu-mobile hidden-lg hidden-md hidden-sm">
        <li class="dropdown active">
          <a href="#">SERVICIOS</a>
        </li>
        <li>
          <a href="#">¿QUÉ PUEDO PAGAR?</a>
        </li>
        <li>
          <a href="#">IMPRIMÍ TU FACTURA</a>
        </li>
        <li>
          <a href="envio-dinero.html">ENVIO DE DINERO</a>
        </li>
        <li>
          <a href="novedades.html">NOVEDADES</a>
        </li>
        <li>
          <a href="contacto.html">CONTACTO</a>
        </li>
        <li>
          <i class="fa fa-search mostrar" aria-hidden="true" style="color:#fff;cursor: pointer;"></i>
        </li>
      </ul>

      <!-- Menu de contactos -->
      <ul class="nav navbar-nav navbar-right menu-mobile menu-iconos hidden-lg hidden-md hidden-sm" style="background-color: #333333;border-top: 3px solid #ba237f;">
        <li>
          <a href="#">¿QUÉ ES PAGO FÁCIL?</a>
        </li>
        <li>
          <i class="fa fa-question" aria-hidden="true"></i><a href="#">PREGUNTAS FRECUENTES</a>
        </li>
        <li>
          <i class="fa fa-map-marker" aria-hidden="true"></i><a href="locales.html">SUMÁ TU LOCAL</a>
        </li>
        <li>
          <i class="fa fa-files-o" aria-hidden="true"></i><a href="">SUMÁ TU EMPRESA</a>
        </li>
        <li class="btn-registrate-mobile">
          <a href="">REGISTRATE</a>
        </li>
        <li class="btn-cuenta-mobile">
          <a href="">MI CUENTA</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- /MENU PRINCIPAL MOBILE-->


</header>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>