All geek questions in one place

Dropstrap dropdown make dropdown arrow change direction

I am looking for a way to make the bootstrap dropdown menu menu down to go up when the menu is closed and omitted when the menu is open.

enter image description here

This is my html code:

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

I think this would be easiest to do in js.

Here is my jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/

Thank.

+1
source share
3 answers

I just ran into the same problem. I wanted the carriage icon to look up when the drop-down list was active, and normal (down) when it wasn't. This is my decision:

<style>
  .caretup {
    transform: rotate(180deg);
  }
</style>
<script>
  $(function(){
    $(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
      $(this).find(".caret").toggleClass("caretup");
    });
  });
</script>

What is it!

+3
source

Try this code.

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class='caret' id='menu-caret'></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><a href="/signout">Sign Out</a></li>
            </ul>
          </li>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

and add script

<script>  
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn();
      $('#menu-caret').addClass('glyphicon glyphicon-chevron-up');
      $('#menu-caret').removeClass('caret');
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
      $('#menu-caret').addClass('caret');
      $('#menu-caret').removeClass('glyphicon glyphicon-chevron-up');
    }); 
</script>

remove onhover css in ur CSS

http://jsfiddle.net/7o8sLhgf/

+2

Solution using jQuery and some small CSS.

 $(function() {
   $(".dropdown").hover(

     function() {
       $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
       $(this).toggleClass('open');
       $('span', this).toggleClass("caret caret-up");
     },

     function() {
       $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
       $(this).toggleClass('open');
       $('span', this).toggleClass("caret caret-up");
     });
 });
/*TODO Check what makes the hover items dark blue*/

.navbar {
  text-transform: uppercase;
  margin-bottom: 0px;
}
.navbar-inverse {
  padding-bottom: 70px;
  padding-top: 70px;
}
.navbar-inverse .navbar-nav > li > a {
  color: white;
}
.navbar-brand {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
}
.navbar-inverse .navbar-toggle {
  border-color: transparent;
}
.navbar-trans {
  background-color: #279ddd;
  color: #fff;
  border-bottom-width: 1px;
  border-color: #fff;
}
.navbar-trans li>a:hover,
.navbar-trans li>a:focus,
.navbar-trans li.active {
  background-color: #38afef;
}
.navbar-trans a {
  color: #fefefe;
}
/*Drop down menu styling*/

ul.dropdown-menu {
  background-color: #279ddd;
}
ul.dropdown-menu {
  background-color: #279ddd;
}
ul.dropdown-menu li a {
  color: white;
}
/*Dropdown on Hover*/

.sidebar-nav {
  padding: 9px 0;
}
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}
.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
.caret-up {
  width: 0;
  height: 0;
  border-left: 4px solid rgba(0, 0, 0, 0);
  border-right: 4px solid rgba(0, 0, 0, 0);
  border-bottom: 4px solid;
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Project Pandora</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav"></ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <span class='caret' id='#menu-caret'></span></a>

          <ul class="dropdown-menu">
            <li> <a href="#">Do Something</a>

            </li>
            <li><a href="#">Do Something</a>

            </li>
            <li class="divider"></li>
            <li><a href="/signout">Sign Out</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- container-collapse -->
</nav>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1685949/

More articles:


All Articles