| Autor |
Nachricht |
komaklos
Threadersteller
Dabei seit: 04.11.2008
Ort: zürich
Alter: -
Geschlecht: -
|
Verfasst Mi 22.02.2012 17:40
Titel Brauche Hilfe bei einem Menu |
  |
|
Hallo zusammen.
Ich habe ein Problem mit einem Menu, beziehungsweise mit dem Effekt den es ausführt.
Ich habe zu wenig Ahnung von Java und jQuery und schaffe es nicht den hover-Effekt in einen click/mouseover-Effekt zu ändern, sodass das Menu bei einem Klick ausklappt und offen bleibt, bis es mit einem weiteren Klick schliesst – wichtig ist, dass der Hauptmenupunkt (z.b. Backwaren) ein Link zu den Kategorien bleibt.
Nach langem googlen, viel lesen und ausprobieren versuch ichs jetzt noch hier und bin um jede Hilfe dankbar!
hier der Code:
und ein Link zur Seite: http://uelikaufmann.ch/Haene/wordpress/
| Code: |
var $j = jQuery.noConflict();
function menuSlide() {
// Handling Menu Children
$j(document).ready(function(){
$j("ul.children, ul.sub-menu").parent().addClass("dropdown"); //Adds a class to the elements that have a sub-menu
$j("#menu li.dropdown").hover(function() { //When the mouse hovers over a main menu
$j(this).addClass("subhover"); //Indicate that this item will be hover overed
}, function(){ //On Hover Out
$j(this).removeClass("subhover"); //On hover out, remove class "subhover"
}).hover(function() {
//Following events are applied to the sub-menu, children items (moving children up and down)
$j(this).parent().find(".subhover ul.children, .subhover ul.sub-menu").slideDown('fast').show(); //Drop down the subnav when the mouse is over a specific element
$j(this).parent().hover(function() {
}, function(){
$j(this).parent().find("ul.children, ul.sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
});
});
}
$j(document).ready(function() {
menuSlide();
});
|
edit: aus dem Tabula Rosa Theme für Wordpress
Zuletzt bearbeitet von komaklos am Mi 22.02.2012 17:57, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 22.02.2012 18:49
Titel
|
|
|
Au weia, was für ein Crap-Code!
Im Prinzip würde sich die Antwort auf wenige Zeilen beschränken,
ABER
ein gleichzeitiges Aufklappen und Laden eines Inhalts ist rein mit Javascript nicht möglich, weil die Seite beim Inhalt anzeigen neu lädt und damit alles „Geklappte“ zurücksetzt. Entweder muss hier also das Template die Markierung des gerade aktiven Artikels übernehmen oder Du musst auf einen der Punkte Klick/Inhalt hinter Oberkategorie verzichten. Dem Code nach, war dem Autor das auch zu kompliziert, weshalb er hover benutzt hat.
[edit]
Ergänzung:
| Code: | <script type="text/javascript">
function menuSlide ($ , jMenu) {
$('li ul' , jMenu).hide ();
$('li' , jMenu).has ('ul').addClass ('js-toggle');
$('.js-toggle>a' , jMenu)
.click (function (event) {
event.preventDefault ();
$(this).parent ().find ('>ul').toggle ();
});
}
var $j = jQuery.noConflict();
$j(document).ready(function() {
menuSlide ($j , $j('#menu'));
});
</script> |
Zuletzt bearbeitet von pantonine am Mi 22.02.2012 19:04, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
komaklos
Threadersteller
Dabei seit: 04.11.2008
Ort: zürich
Alter: -
Geschlecht: -
|
Verfasst Mi 22.02.2012 19:06
Titel
|
|
|
@ pantonine
Vielen Dank für die gute Antwort.
Oke – dann muss halt ein anderes Menu her...
Bester Gruss
edit: grad den neuen code gsehen....
Zuletzt bearbeitet von komaklos am Mi 22.02.2012 19:07, insgesamt 1-mal bearbeitet
|
|
| |
|
|
komaklos
Threadersteller
Dabei seit: 04.11.2008
Ort: zürich
Alter: -
Geschlecht: -
|
Verfasst Mi 22.02.2012 19:29
Titel
|
|
|
Der Code funktioniert, aber jetzt seh ich glaub ich was du vorher gemeint hast. Das Menu schliesst sicht gleich wieder nach auswählen eines Links und die Hauptmenupunkte sind keine Links mehr. Oje.
Naja ich schau mich jetzt mal nach anderen Menu-Plugins um.
Vielen Dank auf jeden Fall!!
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 22.02.2012 19:33
Titel
|
|
|
Wie gesagt, der Code funktioniert nur, wenn die „Oberpunkte“ keine Inhalte bereitstellen. Ansonsten wäre wohl eine serverseitige Variante naheliegend. Ich wollte nur nach meinem Rant auch eine positive Variante entgegenstellen.
Hier noch einmal eine Variante für den ursprünglichen hover-Code:
| Code: | function menuToggleSlide ($ , jMenu) {
$('li ul' , jMenu).hide ();
$('li' , jMenu).has ('ul').addClass ('js-toggle');
jMenu
.mouseleave (function () {
$('li ul' , jMenu).slideUp ('fast');
})
.find ('.js-toggle').mouseenter (function (event) {
$(this).find ('>ul').slideDown ('fast');
});
}
jQuery.noConflict()(function ($){
menuToggleSlide ($ , $('#menu'));
});
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS Menu
i.e. zickt rum bei css-menu
popup menu
Frage zum Menu
ich such ein nettes Menu
Spry Menu
|
|
Willkommen auf dem Portal für Mediengestalter
