Bootstrap - Comment faites glisser la barre de navigation de gauche, au lieu de haut
À ma connaissance, actuellement bootstrap prend en charge basculer la barre de navigation du haut. Comment puis-je le faire glisser à partir de la gauche lorsque la taille de l'écran est petit?
Pour exemple:- Voir les captures d'écran
Dans la capture d'écran présentée ci-dessus, lorsque l'écran est redimensionné, la barre de navigation est activée et glisse vers le bas à partir du haut. J'ai plutôt envie que le navba devrait glisser à partir de la gauche. comment puis-je réaliser cette fonction dans le Bootstrap.
Actuellement, selon le code, la barre de navigation de diapositives à partir de la partie supérieure. Voici mon code.
<nav class="navbar navbar-site navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="{% url 'index' %} " class="navbar-brand logo logo-title">
<span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
<ul class="dropdown-menu user-menu">
<li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
<li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
<li><a href="{% url 'logout' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
</ul>
</li>
{% else %}
<li><a href="{% url 'login' %}">Login</a></li>
<li><a href="{% url 'signup' %}">Signup</a></li>
{% endif %}
<li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">Post Free Add</a></li>
</ul>
</div>
</div>
</nav>
OriginalL'auteur PythonEnthusiast | 2015-07-26
Vous devez vous connecter pour publier un commentaire.
Facile. Modifier le comportement par défaut de
à
slide-collapse
fonctionnalités que nous allons mettre en place maintenantOù le menu est contenu dans
div
qui a l'idmy-navbar-collapse
. Notez que l'utilisation de l'id au lieu de sélecteur de classe permettra d'améliorer l'accessibilité en raison de bootstrap ajouter ARIA unis (élargie et s'est effondré) pour le menuautomatiquement.
Classe
.collapse
dans le bootstrap assure le menu, initialement, être caché.Le code:
Puis coller le code Javascript suivant, quelque part dans le pied de page:
Et les propriétés CSS suivantes:
Quelques conseils:
@grille-float-point d'arrêt
et@grille-float-point d'arrêt-max
Bootstrap MOINS variablesJ'ai mis en œuvre cette ici karriere.milchundzucker.de . Découvrez peut-être vous voir quel est le problème avec votre code. Aussi le dépannage serait de voir si votre Javascript fonctionne correctement. Assurez-vous de placer votre code Javascript dans le très bas de la page, ou à veiller à exécuter sur le document de prêt de l'événement
merci pour l'exemple, Hrvoje. Je vais vérifier cela certainement. Quand je ne pouvais pas obtenir votre solution fonctionne, j'ai essayé pendant des heures à faire des choses différentes à l'aide de css3 transformer et de positionnement, c'est à dire: le réglage de la marge de gauche, etc (
width:300px, left:-300px, transform: translateX(300px) or left: 0;, transform: translateX(0)
-- ce n'est pas dans cet ordre, mais seulement les différentes valeurs de ces propriétés), mais je n'étais pas encore arriver la div à la diapositive à partir de la gauche. Oui, mon javascript est au bas de la page, j'ai aussi quelques intégré, de sorte était de vérifier que l'ordre en tant que bien.OriginalL'auteur Hrvoje Golcic
Essayez ce qui suit et de prendre un coup d'oeil sur le lien suivant pour plus d'explication-
Prendre un coup d'oeil à la suite de Github lien pour fixer la barre de navigation de gauche ou de droite
Fonctionnalité: navbar-fixed-côté gauche ou droit #13919
Un autre lien utile - Nav Barre Latérale Avec Bouton À Bascule
OriginalL'auteur royki
L'utiliser pour des de droite à gauche coulissante:
HTML :
CSS:
JS:
Télécharger les fichiers source: http://www.themeswild.com/read/slide-navigation-left-to-right
🙂 , bon son, juste pour mettre en évidence but .
OriginalL'auteur Sharavnan Kv
Il y a une question similaire ici: Bootstrap 3 de la Diapositive dans le Menu /barre de navigation sur Mobile où l'on a accepté la réponse est d'utiliser jasny bootstrap. Il y a d'autres réponses, mais si Jasny n'était pas votre tasse de thé.
OriginalL'auteur Mark Walker
Il y a un bon post qui tente d'imiter le côté gauche de la bascule comme dans Facebook app à l'aide de jQuery et Bootstrap. Check it out:
http://wsnippets.com/responsive-facebook-style-slide-navigation-menu-for-small-devices-using-jquery-and-twitter-bootstrap/
OriginalL'auteur Paras Dahal
Veuillez consulter cette CODEPEN. Les points suivants sont à noter:
Animer.css bibliothèque a besoin. Plus précisément le
slideInLeft
et laslideOutLeft
animations.Travailler avec liste déroulante au lieu de la l'effondrement composant de Bootstrap.
Définir la
dropdown-menu
élémentstatic
en appliquant la classeposition-static
.Effet de levier la
show
classe qui est appliquée sur ledropdown
élément lors de ladropdown-menu
est indiqué.Effet de levier
left
propriété CSS pour mener à bien la transition. Fondamentalement, nous allons mettre enleft:-100%
sur.dropdown.show .dropdown-menu
et nous allonsleft:0px
sur.dropdown .dropdown-menu
Capture d'écran:
NOTE : Vous pouvez la version d'evaluation d'autres animations pour les
dropdown-menu
de animer.css.Bonne Chance...
OriginalL'auteur Akash