StyleIkone
nabend allerseits,
ich habs wiedermal ne ganze weile mit blindem rumprobieren versucht, komm aber nichtmehr weiter
Ziel: ich möchte für WordPress eine Slide Down Navi in JavaScript/jQuery.
Wordpress is aufgesetzt und bis zu nem gewissen Punkt läuft das mit der Navi auch schon wie ich das möchte, nur das einklappen geht nicht ?!
hier mal der direkte link auf die Seite (es bleibt bei drei Hauptmenüpunkten und nur bei "Portfolio" wirds mehrere Unterseiten geben)
ich hab die Up/Down - Buttons deshalb reingemacht, da ich diese "unsichtbar" über die Überpunkte legen möchte, sobald alles läuft, um nur eine Seite zu laden wenn denn ein Name ausgewählt wird und nicht schon wenn ein Jahr angeklickt wird.
Problem is nun wie gesagt das er mir das nichtmehr schließt und ich komm nicht drauf warum...bzw. ich seh in firebug das er mir die class einfach nicht wechselt...aber ich weiß nicht wieso...normal sollte es so funktionieren (also so les ich den code) wenn der open button geklickt wird, wird erstmal alles geschlossen an <ul>s und dann die jeweilige <ul> geöffnet. Funkioniert auch nur soweit, das er die jeweilige öffnet, er schließt aber nichts anderes...und umgekehrt, also mit dem close button geht mal gleich gar nix...aber seht selbst ;-)
achja und vll bin ich auch ganz auf dem holzweg, denn der erste punkt (in dem fall portfolio) bekommt auch einen button (oben rechts in der ecke von der seite)...weil die funktion ja wohl iwie vor jede ul einen hinstöpselt was im ersten fall aber nicht nötig bzw. nicht gewünscht is...
hier extra nochmal die einzelnen code snippets
JS im Head-Bereich meiner Header.php
Navigation im Body meiner Header.php
Der möglicherweiße relevante CSS-Teil für die Navi
Ich hoffe ich habs verständlich rüber gebracht und mir kann jemand weiterhelfen
Danke im Voraus,
LRG
ich habs wiedermal ne ganze weile mit blindem rumprobieren versucht, komm aber nichtmehr weiter
Ziel: ich möchte für WordPress eine Slide Down Navi in JavaScript/jQuery.
Wordpress is aufgesetzt und bis zu nem gewissen Punkt läuft das mit der Navi auch schon wie ich das möchte, nur das einklappen geht nicht ?!
hier mal der direkte link auf die Seite (es bleibt bei drei Hauptmenüpunkten und nur bei "Portfolio" wirds mehrere Unterseiten geben)
ich hab die Up/Down - Buttons deshalb reingemacht, da ich diese "unsichtbar" über die Überpunkte legen möchte, sobald alles läuft, um nur eine Seite zu laden wenn denn ein Name ausgewählt wird und nicht schon wenn ein Jahr angeklickt wird.
Problem is nun wie gesagt das er mir das nichtmehr schließt und ich komm nicht drauf warum...bzw. ich seh in firebug das er mir die class einfach nicht wechselt...aber ich weiß nicht wieso...normal sollte es so funktionieren (also so les ich den code) wenn der open button geklickt wird, wird erstmal alles geschlossen an <ul>s und dann die jeweilige <ul> geöffnet. Funkioniert auch nur soweit, das er die jeweilige öffnet, er schließt aber nichts anderes...und umgekehrt, also mit dem close button geht mal gleich gar nix...aber seht selbst ;-)
achja und vll bin ich auch ganz auf dem holzweg, denn der erste punkt (in dem fall portfolio) bekommt auch einen button (oben rechts in der ecke von der seite)...weil die funktion ja wohl iwie vor jede ul einen hinstöpselt was im ersten fall aber nicht nötig bzw. nicht gewünscht is...
hier extra nochmal die einzelnen code snippets
JS im Head-Bereich meiner Header.php
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".page_item ul").hide();
$(".current_page_item").parents("ul").show();
$(".current_page_item ul:first").slideDown();
$(".page_item > ul:hidden").before('<a href="#" class="menuToggle menuToggleOpen">v</a>');
$(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>');
a = function(){
$(this).text("^").next("ul").slideDown();
};
b = function(){
$(this).text("v").next("ul").slideUp();
};
$(".menuToggleClose").toggle(b,a);
$(".menuToggleOpen").toggle(a,b);
});
</script>
Navigation im Body meiner Header.php
Code:
<div id="nav" class="clearfix">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
Der möglicherweiße relevante CSS-Teil für die Navi
Code:
#nav{
background:#fff;
font-size:1.2em;
margin-bottom:30px;
padding:0;
width:350px;
height:300px;
z-index:1;
}
#nav ul{
list-style-type:none;
}
#nav ul li{
font-weight:bold;
float:left;
letter-spacing:1px;
margin-bottom:-3px;
margin-right:10px;
padding:2px 5px;
}
#nav ul li a{
color:#000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav ul li a:hover{
color:#E0EEE5;
}
#nav ul li ul{
position:relative;
width:50px;
}
#nav ul li ul li{
position:relative;
width:100px;
}
#nav li ul {
margin-left: 1em;
}
#nav .menuToggle {
position: absolute !important;
top: 0px !important;
right: 0px !important;
color: #397388;
padding: 2px 7px 4px 7px !important;
background: #F0F0F0 !important;
border-width: 0 !important;
margin: 0 !important;
font-weight: bold !important;
}
#nav .menuToggle:hover {
color: #fff;
background: #DDD !important;
}
.current_page_item>a {
font-weight: bold;
}
Ich hoffe ich habs verständlich rüber gebracht und mir kann jemand weiterhelfen
Danke im Voraus,
LRG