Dropdown Menü - UL Breite
Guten Morgen,
ich habe ich für dieses DropDown Menü entschieden, da ich lange nach einem Menü mit Mouseover und Mouseout Animation gesucht habe.
Soweit bin ich total zufrieden. http://preview.sitebase.be/scripts/dropmenu/Example1/
Was mich etwas nervt, die Breite der UL Untermenüs können nur über die CSS definiert werden und sind nicht dynamisch.
Mein altes Menü (superfish) hatte eine zusätzliche Javascript Datei (supersubs.js). Mit dieser konnte ich die UL Dynamisch erzeugen.
Nun meine Idee, warum nicht diese Datei mit dem neuen Menü verwenden.
supersubs.js
Versuche ich dies nun mit meinem Menü zu verwendet, so wird leider bei den UL immer der minWidth von 15 genommen. Ich weiß nicht warum. Evtl. habt ihr mir ja einen Tipp.
Viele Dank
ich habe ich für dieses DropDown Menü entschieden, da ich lange nach einem Menü mit Mouseover und Mouseout Animation gesucht habe.
Soweit bin ich total zufrieden. http://preview.sitebase.be/scripts/dropmenu/Example1/
Was mich etwas nervt, die Breite der UL Untermenüs können nur über die CSS definiert werden und sind nicht dynamisch.
Mein altes Menü (superfish) hatte eine zusätzliche Javascript Datei (supersubs.js). Mit dieser konnte ich die UL Dynamisch erzeugen.
Nun meine Idee, warum nicht diese Datei mit dem neuen Menü verwenden.
supersubs.js
/*
* Supersubs v0.2b - jQuery plugin
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*
* This plugin automatically adjusts submenu widths of suckerfish-style menus to that of
* their longest list item children. If you use this, please expect bugs and report them
* to the jQuery Google Group with the word 'Superfish' in the subject line.
*
*/
;(function($){ // $ will refer to jQuery within this closure
$.fn.supersubs = function(options){
var opts = $.extend({}, $.fn.supersubs.defaults, options);
// return original object to support chaining
return this.each(function() {
// cache selections
var $$ = $(this);
// support metadata
var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
// get the font size of menu.
// .css('fontSize') returns various results cross-browser, so measure an em dash instead
var fontsize = $('<li id="menu-fontsize">—</li>').css({
'padding' : 0,
'position' : 'absolute',
'top' : '-999em',
'width' : 'auto'
}).appendTo($$).width(); //clientWidth is faster, but was incorrect here
// remove em dash
$('#menu-fontsize').remove();
// cache all ul elements
$ULs = $$.find('ul');
// loop through each ul in menu
$ULs.each(function(i) {
// cache this ul
var $ul = $ULs.eq(i);
// get all (li) children of this ul
var $LIs = $ul.children();
// get all anchor grand-children
var $As = $LIs.children('a');
// force content to one line and save current float property
var liFloat = $LIs.css('white-space','nowrap').css('float');
// remove width restrictions and floats so elements remain vertically stacked
var emWidth = $ul.add($LIs).add($As).css({
'float' : 'none',
'width' : 'auto'
})
// this ul will now be shrink-wrapped to longest li due to position:absolute
// so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
.end().end().clientWidth / fontsize;
// add more width to ensure lines don't turn over at certain sizes in various browsers
emWidth += o.extraWidth;
// restrict to at least minWidth and at most maxWidth
if (emWidth > o.maxWidth) { emWidth = o.maxWidth; }
else if (emWidth < o.minWidth) { emWidth = o.minWidth; }
emWidth += 'em';
// set ul to width in ems
$ul.css('width',emWidth);
// restore li floats to avoid IE bugs
// set li width to full width of this ul
// revert white-space to normal
$LIs.css({
'float' : liFloat,
'width' : '100%',
'white-space' : 'normal'
})
// update offset position of descendant ul to reflect new width of parent
.each(function(){
var $childUl = $('>ul',this);
var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
$childUl.css(offsetDirection,emWidth);
});
});
});
};
// expose defaults
$.fn.supersubs.defaults = {
minWidth : 9, // requires em unit.
maxWidth : 25, // requires em unit.
extraWidth : 0 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
};
})(jQuery); // plugin code ends
Versuche ich dies nun mit meinem Menü zu verwendet, so wird leider bei den UL immer der minWidth von 15 genommen. Ich weiß nicht warum. Evtl. habt ihr mir ja einen Tipp.
jQuery(document).ready(function($){
$("#nav-one")..supersubs({
minWidth: 15, // minimum width of sub-menus in em units
maxWidth: 20, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).dropmenu({});
});
Viele Dank
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 183843
Url: https://administrator.de/contentid/183843
Ausgedruckt am: 22.11.2024 um 10:11 Uhr
1 Kommentar