Duplicating menu bootstrap

Asked

Viewed 211 times

2

I am Noob in web development and need a little help from colleagues, if possible.

I’m making a website, using bootstrap, and I came across a little problem. I have two drop-down menus and when I click on one or the other both menus are opened as image below:

PS: I use the same CSS for both menus.

menu duplicado

HTML of the menus:

<div class="col-md-4 col-sm-4">
  <!-- Button Profile -->
  <div class="btn-cart-md">
      <a class="cart-link" href="#">
          <!-- Image -->
          <img class="img-responsive foto-redonda" src="/res/site/img/male.png" alt="" />

          <!-- Heading -->

              <h4>Olá, David Ferreira da Cunha</h4>
              <span>Minha conta</span>
              <div class="clearfix"></div>

              <ul class="cart-dropdown" role="menu">
                  <li>
                      <!-- Atralho para meus pedidos -->
                      <div class="cart-item">
                          <a class="btn btn-primary" data-toggle="modal" href="#">Meus pedidos</a>
                      </div>
                  </li>
                  <li>
                      <!-- Atalho para configurações da conta -->
                      <div class="cart-item">
                          <a class="btn btn-primary" data-toggle="modal" href="#">Configurações</a>
                      </div>
                  </li>
                  <li>
                      <!-- Atalho para finalizar sessão no navegador -->
                      <div class="cart-item">
                          <a class="btn btn-danger" data-toggle="modal" href="#">Sair</a>
                      </div>
                  </li>
              </ul>
              <div class="clearfix"></div>

      </a>
  </div>
  <div class="clearfix"></div>
</div>

<div class="col-md-2 col-sm-2">
  <!-- Button Kart -->
  <div class="btn-cart-md">
      <a class="cart-link" href="#">
          <!-- Image -->
          <img class="img-responsive" src="/res/site/img/cart.png" alt="" />
          <!-- Heading -->
          <h4>Meu carrinho</h4>
          <span>0 itens 0,00</span>
          <div class="clearfix"></div>
      </a>
      <ul class="cart-dropdown" role="menu">
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav1.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Exception Reins Evocative</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$200/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav2.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Taut Mayoress Alias Appendicitis</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$190/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <!-- Item remove icon -->
                  <a href="#"><i class="fa fa-times"></i></a>
                  <!-- Image -->
                  <img class="img-responsive img-rounded" src="/res/site/img/nav-menu/nav3.jpg" alt="" />
                  <!-- Title for purchase item -->
                  <span class="cart-title"><a href="#">Sinter et Molests Perfectionist</a></span>
                  <!-- Cart item price -->
                  <span class="cart-price pull-right red">$99/-</span>
                  <div class="clearfix"></div>
              </div>
          </li>
          <li>
              <!-- Cart items for shopping list -->
              <div class="cart-item">
                  <a class="btn btn-danger" data-toggle="modal" href="#shoppingcart1">Resumo do pedido</a>
              </div>
          </li>
      </ul>
      <div class="clearfix"></div>
  </div>
  <div class="clearfix"></div>
</div>

Can anyone explain to me what I’m doing wrong? When the user clicks on a menu the page should open the drowp-down referring to the clicked menu and not both at the same time.

Below the CSS.

As it is very large and does not fit here in the description of the question, follow the link so you can view.

http://ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145/css/style.css

php css html5 bootstrap slimframework

  • Enter CSS and jQuery/Javascript if any so you can test your code and help it.

  • Hello @Eliseub. As CSS is very big I am sending the link where it is. http://ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145/css/style.css

  • Is this the layout you’re using? http://ashobiz.dreamhosters.com/wrapbootstrap/cakefactory145/ Tested in Chrome, Edge and Firefox and worked normally. If you can provide your URL and see the additional codes you made, which possibly gave bug, could better help you.

  • try adding the browser source code, without the tags you use in your frame work

  • @Eliseub. is that layout. The point is I added a div next to the cart. If you notice in the linlk layout that you sent me only have the shopping cart div. On my localhost I added a div on the side for the user profile (please note the image I posted above). I use the same classes for both Ivs, when I click on any of them always.

  • @Marcosbrinnerpikatoons unfortunately the code on the page exceeds the character limit. Have some other way to post it?

  • puts only the part that is your menu must be inside <container> or <Nav> <header>

  • Then I can test it here

  • @Marcosbrinnerpikatoons updated the question description with the page’s HTML, without the framework’s PHP. It’s for you?

  • There is no jQuery that opens the menus?

  • @Ķ has this: $(Document). ready(Function() { $('.btn-Cart-Md .Cart-link'). click(Function(e){ e. preventDefault(); var $dd_menu = $('.btn-Cart-Md .Cart-dropdown') if ($dd_menu.hasClass('open')) { $dd_menu.fadeOut(); $dd_menu.removeClass('open'); } Else { $dd_menu.fadein(); $dd_menu.addClass('open'); } }); }); The two Divs are using. That would be the problem?

  • @That’s what it was! That’s what it was.

Show 7 more comments

1 answer

1


As code informed in the comments:

$(document).ready(function() {
   $('.btn-cart-md .cart-link').click(function(e){
      e.preventDefault();
      var $dd_menu = $('.btn-cart-md .cart-dropdown');
      if ($dd_menu.hasClass('open')) {
         $dd_menu.fadeOut(); $dd_menu.removeClass('open');
      } else {
         $dd_menu.fadeIn(); $dd_menu.addClass('open');
      }
   });
});

1. No need to include .cart-link on the dial. Enough .btn-cart-md that already encompasses the button link.

2. In var $dd_menu = $('.btn-cart-md .cart-dropdown');, it is necessary to specify a single <ul> with class .cart-dropdown which will be opened, using .find.

The code would look like this:

$(document).ready(function() {
   $('.btn-cart-md').click(function(e){
      e.preventDefault();
      var $dd_menu = $(this).find('.cart-dropdown');
      if ($dd_menu.hasClass('open')) {
         $dd_menu.fadeOut(); $dd_menu.removeClass('open');
         } else {
            $dd_menu.fadeIn(); $dd_menu.addClass('open');
      }
   });
});

Browser other questions tagged php css html5 bootstrap slimframework

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