Bootstrap Déroulant Faire flèche de menu Déroulant changer de Direction

Je suis à la recherche d'un moyen de rendre la force du poignet menu déroulant flèche de changement de directions à partir de la vers le haut lorsque le menu est fermé et vers le bas lorsque le menu est ouvert.

C'est mon code html:

<!-- 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>

Je pense qu'il serait plus facile de le faire en js.

Voici mon jsfiddle code: https://jsfiddle.net/Pabi/RxguB/75/

Merci.

Ce serait génial si vous pouviez ajouter un lien vers jsfiddle. Cela permettra de réduire le temps d'installation d'un projet "bootstrap" pour répondre à votre question, et bien plus de chances d'obtenir une réponse rapidement. Merci

InformationsquelleAutor Pabi | 2015-07-28

3

Je viens de rencontré le même problème. Je voulais faire le signe icône rechercher quand déroulante a été active, et la normale (en bas) quand il n'était pas. C'est ma solution:
```
<style>
.caretup {
transform: rotate(180deg);
}
</style>
<script>
$(function(){
$(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
$(this).find(".caret").toggleClass("caretup");
});
});
</script>
```
Que c'est!

InformationsquelleAutor Jose Cifuentes

Essayer ce 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>

et ajouter un 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>

supprimer onhover css dans ur CSS

consulter ce violon http://jsfiddle.net/7o8sLhgf/

vérifiez votre code correctement @Pabi . at <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Compte <b class="caret"></b></a>, il faut donc ajouter l'id, il va travailler
Ne semble pas fonctionner pour moi, la flèche de menu déroulant de l'icône n'a pas changé. Et ne change pas lorsque je planer sur elle
partagez votre violon la fois ...
Elle est ici: jsfiddle.net/Pabi/RxguB/75
petit changement - l'utilisation de signe de signe-vers le haut au lieu de glyphicon glyphicon-chevron-up

InformationsquelleAutor Nagesh Sanika

Solution à l'aide de jQuery et quelques petites feuilles de style CSS.

JS:

 $(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");
});
});

CSS:

/*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;
}

HTML:

<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>

Je crois que le code #279ddd correspond à bleu foncé.
C'est la ligne... ul.dropdown-menu { background-color: #279ddd; }
Aussi, vous n'avez ul.dropdown-menu {background-color: #279ddd;} deux fois

InformationsquelleAutor vanburen

Vous devez vous connecter pour publier un commentaire.