JQuery Mega Menu pleine largeur Menu Item

Question

Je suis nouveau à css et jquery et ai un problème avec un élément de menu. J'ai un menu Jquery Mega et je veux avoir l'élément de menu Attorney Profile être 1 seule rangée au lieu des deux il est maintenant. Normalement je posterais du code mais il y en a juste beaucoup. Donc, je vais poster un lien vers le site de travail réel.

J'ai essayé d'ajouter de la pleine largeur mais sans succès.

$(document).ready(function($){ 
    $('#mega-menu-tut').dcMegaMenu({ 
     rowItems: '1', 
     speed: 'fast' 
     fullWidth: true 
    }); 
}); 

J'ai essayé aussi de modifier le css ici:

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */ 
    float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */ 
    width: 130px; 
    height: 165px; 
    margin: 0 2px 7px 2px; 
    border: 3px solid #ccc; 
} 

Mais qui vient à l'intérieur de ce menu modifie réelle.

Voici le site actif:http://gdisinc.com/barker/default.php

Avis si vous roulez votre souris sur procureur profiling affiche deux lignes. Comment puis-je faire cette ligne qui correspond à la largeur du site qui est 960px. Je vous remercie!

PS: J'ai utilisé ce système de menu: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

Answer 1

Il semble que vous aurez besoin de changer l'option "rowitems" ici:

$(document).ready(function($){ 
    $('#mega-menu-tut').dcMegaMenu({ 
    rowItems: '3', 
    speed: 'fast' 
    }); 
}); 

Si vous changez à '5' il devrait afficher tous les éléments sur la même ligne. Jetez un oeil sur les exemples:

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

Il ne semble pas comme il y a un moyen de configurer cet effet par élément de menu à moins que vous divisez le menu dans des instances distinctes du megamenu.

Answer 2

Vous pouvez modifier le rembourrage sur ce style

.dcjq-mega-menu ul.menu li a 

à

padding:12px 20px; 

Les éléments de la ont une largeur en fonction de leur contenu, ce qui réduit la taille de la police pour les éléments de navigation travailleraient comme bien. Les correctifs pour de tels problèmes sont facilement trouvés en utilisant Chrome Web Inspector/Firefox Firebug etc.

Serait probablement bon de ne pas avoir le petit diviseur après avoir contacté l'onglet nous aussi. Vous pouvez y parvenir en ajoutant une: dernière classe enfant comme celui-ci:

.dcjq-mega-menu ul.menu li:last-child a { background:none; } 

Le problème est que le sélecteur CSS n'est pas très lisible ici et peut conduire plus tard à des problèmes très gênants sur. Si vous pouvez toujours modifier ces déclarations longues à une seule classe:

.last-menu-item { background:none; } 

De plus, gardez à l'esprit que: dernier enfant n'est pas pris en charge sur Internet Explorer < 9. http://caniuse.com/#search=last-child

Bienvenue sur le monde de CSS ...:)