Sponsored Links |
|
|||
Das ist jQuery, das populärste javascript-framework.
Das "> ul" ist ein CSS-Befehl, du selektierst damit alle direkten UL, so wie im CSS. genauso wie in $j('#mobile-menu .container ul li'), damit selektierst du in JS die Elemente "'#mobile-menu .container ul li", wie im CSS. das each wirkt dann auf jedes Element (jedes li-Element von denen) |
Sponsored Links |
|
||||
Zitat:
Hier noch mal etwas mehr von dem Code: Code:
function SFArrows(){ //set height of dropdown arrow $j('.sf-sub-indicator').css('height',$j('a.sf-with-ul').height()); } SFArrows(); //responsive nav $j('body').on('click','#toggle-nav',function(){ $j('#mobile-menu').stop(true,true).slideToggle(500); return false; }); ////append dropdown indicators / give classes $j('#mobile-menu .container ul li').each(function(){ if($j(this).find('> ul').length > 0) { $j(this).addClass('has-ul'); $j(this).find('> a').append('<span class="sf-sub-indicator"><i class="icon-angle-down"></i> HELLO </span>'); } }); ////events $j('#mobile-menu .container ul li:has(">ul") > a').click(function(){ $j(this).parent().toggleClass('open'); $j(this).parent().find('> ul').stop(true,true).slideToggle(); return false; }); Danke. Habe die JQuery Doc angeschaut und nachgelesen, was find() macht. Habe das Problem, daß die ganzen sf-Klassen scheinbar nicht gefunden werden. Auch dieses icon "angle-down" erscheint nicht. Das Framework ist das bizstream und die Site wurde unter WP erstellt, ich habe sie aber in ein anderes CMS importiert. Habe jetzt mal da ein HELLO reingeschrieben und in meinen CSS file zwecks Test eingetragen (damit ich mal eine Wirkung sehe): Code:
.li .menu-item-has-children { border-width: 10px; border-color: green; background-color: red; } .icon-angle-down i { background-color: green; width: 10px ; height: 10px; } .sf-sub-indicator { text-decoration: underline; } Ziel wäre es, an Stelle des HELLO ein Icon hinzupflanzen, dem die URL des Knoten hinterlegt wird. Ist hier der richtige Platz für eine derartige Diskussion? Grüße Christoph
__________________
-- Viele Grüße Christoph Geändert von Krischu (20.05.2016 um 11:10 Uhr) |
|
|||
Wenn du das Element im HTML mit dem Webinspector untersuchst, was hat es dann für Eigenschaften? Welche sollte es haben,d amit der von dir gewünschte Pfeil dargestellt wird?
Was ich damit sagen will: Du hast keinerlei CSS Definition für die Klasse icon-angle-down, sondern nur für i-Element innerhalb der Klasse icon-angle-down, davon finden sich aber keine in deinem Code. Du musst also dein CSS so anpassen, dass es auch auf dein Element greift. Und nein, .sf-sub-indicator ist nicht das selbe wie .icon-angle-down, was wiederum was ganz anderes als .icon-angle-down i ist. |
|
||||
Zitat:
CSS hinzugefügt (aus superfish.css entnommen): Code:
.sf-sub-indicator { color: lightgray; position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 24px; height: 24px; /* text-indent: -999em;*/ overflow: hidden; /* background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; */ /* 8-bit indexed alpha png. IE6 gets solid image only */ } Code:
////append dropdown indicators / give classes $j('#mobile-menu .container ul li').each(function(){ if($j(this).find('> ul').length > 0) { $j(this).addClass('has-ul'); $j(this).find('> a').append('<span class="sf-sub-indicator"><i class="fa fa-angle-double-right" style="font-size:24px"></i></span>'); } }); ////events $j('#mobile-menu .container ul li:has(">ul") > a').click(function(){ $j(this).parent().toggleClass('open'); $j(this).parent().find('> ul').stop(true,true).slideToggle(); return false; }); Eigentlich bin ich jetzt fast soweit. Im Moment bewirkt Klicken in der Zeile "Über uns" an beliebiger Stelle, daß das Submenu aufklappt. Mir muß es jetzt nur noch gelingen, das >> - Symbol mit der URL des Verzweigungsknotens zu hinterlegen. Wie kriege ich den (über das JQuery) in den code injiziert? Frage: kriegt man hier in die Beiträge auch Inline-Grafiken? -- Christoph
__________________
-- Viele Grüße Christoph Geändert von Krischu (20.05.2016 um 12:19 Uhr) |
|
|||
Mit jQuery ist das recht einfach, du musst nur spezifieren, wo du das genau haben willst. entweder mit append anhängen, insertBefore oder insertAfter gibt es auch noch, liegt ganz in deiner Hand, wo/wie du das haben willst. Du musst nur darauf achten, dass du keinen Link IN einen Link einfügst, das klappt dann natürlich nicht Also klappen wird es schon, aber du wirst immer nur einen Link aufrufen können beim anklicken *g*
|
|
||||
Zitat:
Code:
////events $j('#mobile-menu .container ul li:has(">ul") > a').click(function(){ $j(this).parent().toggleClass('open'); $j(this).parent().find('> ul').stop(true,true).slideToggle(); return false; }); -- Grüße Christoph
__________________
-- Viele Grüße Christoph |
|
|||
Kannst du nochmal zusammenschreiben was du genau möchtest und was du schon hast? Ich sehe nämlich bei deinem Screenshot kein >> und ich weiß ehrlich gesagt nicht genau, was du jetzt genau erreichen willst. Und bevor wir uns hier im Kreis drehenund nicht weiter kommen wäre das wohl besser, du erläuterst das nochmal
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS > Tabelle im Frame über den Rand hinaus? | Stephan1958 | CSS | 5 | 04.02.2016 12:47 |
IE8 -> Xhtml und normale Links -> Kein Hovereffekt | insanic! | CSS | 4 | 07.08.2009 21:47 |
Container nimmt nicht die Höhe seines Inhalts an | Lestat | CSS | 10 | 04.08.2005 14:47 |
div -> scrollen -> balken aber nur vertikal??? | bw | CSS | 2 | 12.06.2004 23:45 |