Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Frage Entwicklung JavaScript

Dropdown Menü - UL Breite

Mitglied: ottscho

ottscho (Level 2) - Jetzt verbinden

20.04.2012 um 10:45 Uhr, 4040 Aufrufe, 1 Kommentar

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
01.
 
02.
/* 
03.
 * Supersubs v0.2b - jQuery plugin 
04.
 * Copyright (c) 2008 Joel Birch 
05.
06.
 * Dual licensed under the MIT and GPL licenses: 
07.
 * 	http://www.opensource.org/licenses/mit-license.php 
08.
 * 	http://www.gnu.org/licenses/gpl.html 
09.
10.
11.
 * This plugin automatically adjusts submenu widths of suckerfish-style menus to that of 
12.
 * their longest list item children. If you use this, please expect bugs and report them 
13.
 * to the jQuery Google Group with the word 'Superfish' in the subject line. 
14.
15.
 */ 
16.
 
17.
;(function($){ // $ will refer to jQuery within this closure 
18.
 
19.
	$.fn.supersubs = function(options){ 
20.
		var opts = $.extend({}, $.fn.supersubs.defaults, options); 
21.
		// return original object to support chaining 
22.
		return this.each(function() { 
23.
			// cache selections 
24.
			var $$ = $(this); 
25.
			// support metadata 
26.
			var o = $.meta ? $.extend({}, opts, $$.data()) : opts; 
27.
			// get the font size of menu. 
28.
			// .css('fontSize') returns various results cross-browser, so measure an em dash instead 
29.
			var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({ 
30.
				'padding' : 0, 
31.
				'position' : 'absolute', 
32.
				'top' : '-999em', 
33.
				'width' : 'auto' 
34.
			}).appendTo($$).width(); //clientWidth is faster, but was incorrect here 
35.
			// remove em dash 
36.
			$('#menu-fontsize').remove(); 
37.
			// cache all ul elements 
38.
			$ULs = $$.find('ul'); 
39.
			// loop through each ul in menu 
40.
			$ULs.each(function(i) {	 
41.
				// cache this ul 
42.
				var $ul = $ULs.eq(i); 
43.
				// get all (li) children of this ul 
44.
				var $LIs = $ul.children(); 
45.
				// get all anchor grand-children 
46.
				var $As = $LIs.children('a'); 
47.
				// force content to one line and save current float property 
48.
				var liFloat = $LIs.css('white-space','nowrap').css('float'); 
49.
				// remove width restrictions and floats so elements remain vertically stacked 
50.
				var emWidth = $ul.add($LIs).add($As).css({ 
51.
					'float' : 'none', 
52.
					'width'	: 'auto' 
53.
				}) 
54.
				// this ul will now be shrink-wrapped to longest li due to position:absolute 
55.
				// so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer 
56.
				.end().end()[0].clientWidth / fontsize; 
57.
				// add more width to ensure lines don't turn over at certain sizes in various browsers 
58.
				emWidth += o.extraWidth; 
59.
				// restrict to at least minWidth and at most maxWidth 
60.
				if (emWidth > o.maxWidth)		{ emWidth = o.maxWidth; } 
61.
				else if (emWidth < o.minWidth)	{ emWidth = o.minWidth; } 
62.
				emWidth += 'em'; 
63.
				// set ul to width in ems 
64.
				$ul.css('width',emWidth); 
65.
				// restore li floats to avoid IE bugs 
66.
				// set li width to full width of this ul 
67.
				// revert white-space to normal 
68.
				$LIs.css({ 
69.
					'float' : liFloat, 
70.
					'width' : '100%', 
71.
					'white-space' : 'normal' 
72.
				}) 
73.
				// update offset position of descendant ul to reflect new width of parent 
74.
				.each(function(){ 
75.
					var $childUl = $('>ul',this); 
76.
					var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right'; 
77.
					$childUl.css(offsetDirection,emWidth); 
78.
				}); 
79.
			}); 
80.
			 
81.
		}); 
82.
	}; 
83.
	// expose defaults 
84.
	$.fn.supersubs.defaults = { 
85.
		minWidth		: 9,		// requires em unit. 
86.
		maxWidth		: 25,		// requires em unit. 
87.
		extraWidth		: 0			// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values 
88.
	}; 
89.
	 
90.
})(jQuery); // plugin code ends 
91.
 

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.

01.
jQuery(document).ready(function($){ 
02.
$("#nav-one")..supersubs({ 
03.
            minWidth:    15,   // minimum width of sub-menus in em units 
04.
            maxWidth:    20,   // maximum width of sub-menus in em units 
05.
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
06.
                               // due to slight rounding differences and font-family 
07.
        }).dropmenu({}); 
08.
});
Viele Dank
Mitglied: ottscho
20.04.2012 um 13:29 Uhr
ich bin nun ein wenig am Debugen und stelle fest, in emWidth nichts steht.
Warum? Was passiert eig hier?

01.
var emWidth = $ul.add($LIs).add($As).css({  
02.
'float' : 'none',  
03.
'width'	: 'auto'  
04.
}).end().end()[0].clientWidth
Bitte warten ..
Ähnliche Inhalte
PHP
PHP Dropdown Menü, Werte aus DB
Frage von laladuduPHP3 Kommentare

Hi, ich hoffe jemand versteht mein Problem^^ Folgendes: Ich habe die Tabelle "Geräte" mit Geräte ID (PK) Gerätename raumID ...

Microsoft Office
Dropdown in excel
gelöst Frage von cse1008Microsoft Office9 Kommentare

Hi zusammen ich hab ein kleines problem und warscheinlich stell ich mich einfach nur zu blöd an dafür. ich ...

Administrator.de Feedback
Breiter Login-Balken auf der Startseite
gelöst Frage von killtecAdministrator.de Feedback10 Kommentare

Hallo, ich habe heute morgen festgestellt, dass beim Aufruf der Administrator-Webseite der Headerbalken so aussieht Nach dem Login ist ...

JavaScript
Rekursion statt "Tiefe" in die "Breite"
gelöst Frage von it4baerJavaScript6 Kommentare

Hallo, ich möchte Ordner "rekursiv" durchlaufen. Anstelle von "in die Tiefe" möchte ich aber das ganze "in der Breite" ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 1 TagLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 2 TagenTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 2 TagenSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 2 TagenSicherheit10 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
Batch & Shell
Meltdown Microsoft Prüf Script - .zip Datei leider leer
gelöst Frage von MasterBlaster88Batch & Shell13 Kommentare

Hallo zusammen, ich patche gerade unsere Windows Server bzgl. der Meltdown Lücke. Patch vorhanden, Reg Keys gesetzt Um das ...

Batch & Shell
Shell-Skript - Syntax error: Unterminated quoted string
Frage von newit1Batch & Shell13 Kommentare

Hallo Ich schreibe ein Skript das eine CSV-Datei in eine mySQL Datenbank schieben soll. Bekomme nach start des Skrips ...

E-Mail
Erfahrungen mit hMailServer gesucht
Frage von it-fraggleE-Mail10 Kommentare

Hallo, meine neue Stelle möchte einen eigenen Mailserver. Ich als Linuxkind war direkt geistig mit Postfix dabei. Leider wollen ...

Entwicklung
VBS: alle PDF-Dateien in einem Ordner gleichzeitig öffnen
gelöst Frage von JuweeeEntwicklung9 Kommentare

Hallo, ich habe in deiner Ordnerstruktur (.\Tagesberichte\xx.18\) mehrere dynamische PDF-Formulare (mit LCD erstellt). Die Berichtsformulare sind im Layout alle ...