bootstrap déroulant haut niveau de navigation faire un lien cliquable
Je suis en utilisant le bootstrap thème wordpress pour créer un menu avec menu déroulant, cependant le haut niveau des liens qu'révèle la liste déroulante en cliquant sur & ne pas aller à une page lorsque l'utilisateur clique dessus. Donc, en www.thermoryuk.co.uk/wp/quand je clique sur 'Plancher' je veux aller le revêtement de sol de la page ainsi que de révéler la liste déroulante.
Le Code ci-dessous, merci d'avance
<nav class="subnav clearfix">
<ul id="menu-product-menu" class="nav nav-pills pull-right">
<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87 dropdown" data-dropdown="dropdown">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=31" class="dropdown-toggle" data-toggle="dropdown">
Flooring <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88 dropdown-submenu" data-dropdown="dropdown">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=32" class="dropdown-toggle" data-toggle="dropdown">Ash Flooring</a>
<ul class="dropdown-menu">
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=60">Ash Flooring Gallery</a>
</li>
</ul>
</li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=34">Spruce Flooring</a>
</li>
<li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=36">Birch Flooring</a>
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
<a href="http://www.thermoryuk.co.uk/wp/?page_id=38">Pecan Flooring</a>
</li>
</ul>
</li>
</ul>
</nav>
/* ============================================================
* bootstrap-dropdown.js v2.2.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; //jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
$parent.toggleClass('open')
}
$this.focus()
return false
}
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider):visible a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- //up
if (e.keyCode == 40 && index < $items.length - 1) index++ //down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
}
function clearMenus() {
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
var old = $.fn.dropdown
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* DROPDOWN NO CONFLICT
* ==================== */
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
InformationsquelleAutor nihilster | 2013-05-24
Vous devez vous connecter pour publier un commentaire.
Vous pouvez définir que par la suppression de
data-toggle="dropdown"
à partir de votre code HTML. Comme un ajout à votre question, nous pouvons définir la liste déroulante travailler à la souris par la mise endata-hover="dropdown"
.C'est le le comportement par défaut. La valeur liquidative sont activés par des clics, pas plane. C'est ce qui explique pourquoi en cliquant sur le point d'ancrage, est révélateur du sous-menu au lieu de suivre le lien.
Il y a un travail autour de cette SORTE de post.
Nous pouvons simplement utiliser ce code:
Une petite astuce sur ce qui a été proposé ci-dessus. Œuvres pour Basculer sur le menu déroulant et appuyez de nouveau lorsque le menu est en baisse de suivre le lien parent
ajouter un peu de html
js fiddle l'essayer
Je suis à la recherche dans ce avec Bootstrap 3 et a été en mesure de faire ce travail sur mon projet affecter des liens vers le texte et l'accent circonflexe durée:
Alors ajoutée à la css:
&
.ajouter cette css de votre barre de navigation
et ajouter l'attribut
Je suggère également à l'essai pour la largeur de corps, de sorte que mobile nav continue à fonctionner correctement.
Si seulement l'emplacement de jeu.href, si la taille du corps est plus grand que le point d'arrêt:
Modifier Une balise comme ceci:
Sur vous fichier JS ajouter: