I build up a website for a friend, but now I'm facing an issue with my js/css based vertical and collapsible menu. Everytime I click a link in there, the new page gets loaded and the whole menu collapses again. I tried to find a way to actually "store" the information what is opended, but failed so far. I was even looking into the option of just having some kind of "trigger" on the subpages loaded to actually tell the menu what part should be "open"... Hopefully someone can help me on this one.
Just as a pre-warning I'm not really used to code in html/php/js, so please try to explain possible solutions in a way a newbie might understand :-)
My code so far:
Javascript:
$(document).ready(function() {
// Collapse everything but the first menu:
$("#VerColMenu > li > a").not("").find("+ ul").slideUp(1);
// Expand or collapse:
$("#VerColMenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
});
CSS:
<!-- jq Menu -->
#VerColMenu, #VerColMenu ul
{
list-style : none;
width : 15em;
}
#VerColMenu a
{
color : #ffffff;
display : block;
font-weight : bold;
padding : 0.5em 1em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
border-bottom: 1px solid #711515;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 1%, #8f0222 56%, #a90329 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#000000), color-stop(56%,#8f0222), color-stop(100%,#a90329)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* IE10+ */
background: linear-gradient(to right, #000000 1%,#8f0222 56%,#a90329 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#a90329',GradientType=1 ); /* IE6-9 */
}
#VerColMenu ul a
{
color : #ffffff;
font-weight : normal;
text-decoration: underline;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 44%, #000000 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(99%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* IE10+ */
background: linear-gradient(to right, #a90329 0%,#8f0222 44%,#000000 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
#VerColMenu ul a:hover
{
background : #ffffff;
text-decoration: underline;
color : #000000;
}
HTML/PHP on Index.php (part for the content block where the link inside the menu will show up):
<div class="content">
<p>
<?php
$page = $_GET['page'];
# !! add all pages to the array !!
$pages = array('welcome', 'delivery', 'contact', 'impress', 'about', 'terms', );
if (!empty($page)) {
if(in_array($page,$pages)) {
$page .= '.php';
include($page);
}
else {
echo 'Page not found. Return to
<a href="index.php">index</a>';
}
}
else {
include('welcome.php');
}
?>
</p>
</div>
submenu.php (called inside index.php):
<ul id="VerColMenu">
<li><a title="Click to open or close this section" href="#">Bekleidung</a>
<ul>
<li><a href="index.php?page=tshirts">T-Shirts</a></li>
<li><a href="index.php?page=girlies">Girlie-Shirts</a></li>
<li><a href="index.php?page=longs">Longsleeves</a></li>
<li><a href="index.php?page=hoodies">Kapuzenpullover</a></li>
<li><a href="index.php?page=hoodiejackets">Kapuzenjacken</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Bekleidungs-Accesoires</a>
<ul>
<li><a href="index.php?page=labels">Kleidungs- & Wasch-Etiketten</a></li>
<li><a href="index.php?page=coverband">Abdeckband für Nähte</a></li>
<li><a href="index.php?page=zipper_puller">Reißverschluß-Zughilfe</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Kopf-, Hals- und Armbedeckung</a>
<ul>
<li><a href="index.php?page=caps">Caps</a></li>
<li><a href="index.php?page=beanies">Beanies</a></li>
<li><a href="index.php?page=scarves">Schals</a></li>
<li><a href="index.php?page=bandanas">Bandanas</a></li>
<li><a href="index.php?page=sweatbands">Schweißbänder</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Einlassarmbänder</a>
<ul>
<li><a href="index.php?page=alu">Stoffarmbänder mit Alu-Plombe</a></li>
<li><a href="index.php?page=plastic">Stoffarmbänder mit Kunststoffverschluss</a></li>
<li><a href="index.php?page=control_pvc">Kunststoffbänder</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Aufnäher / Patches</a>
<ul>
<li><a href="index.php?page=wovenpatch">Gewebte Aufnäher</a></li>
<li><a href="index.php?page=embroiderypatch">Gestickte Aufnäher</a></li>
<li><a href="index.php?page=backpatch">Bedruckte Rückenaufnäher</a></li>
<li><a href="index.php?page=embroiderykeychain">Gestickte / Gewebte Schlüsselanhänger</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Accesoires</a>
<ul>
<li><a href="index.php?page=dogtags">Dog Tags</a></li>
<li><a href="index.php?page=lanyard">Schlüsselbänder / Lanyards</a></li>
<li><a href="index.php?page=keychain">Schlüsselanhänger</a></li>
<li><a href="index.php?page=wallet">Geldbörsen</a></li>
<li><a href="index.php?page=billholder">Mappen mit Prägung</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Banner & Flaggen</a>
<ul>
<li><a href="index.php?page=backdrop">Backdrop-Banner</a></li>
<li><a href="index.php?page=combanner">Werbebanner</a></li>
<li><a href="index.php?page=posterflag">Poster Flag</a></li>
<li><a href="index.php?page=beachflag">Beachflag / Segel</a></li>
<li><a href="index.php?page=aframe">A-Frame / Dreieck</a></li>
<li><a href="index.php?page=rollup">Roll Up</a></li>
<li><a href="index.php?page=golfflag">Golf Fahne</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Giveaways</a>
<ul>
<li><a href="index.php?page=bannerpen">Banner-Kugelschreiber</a></li>
<li><a href="index.php?page=teepeg">Golftees</a></li>
<li><a href="index.php?page=reflarm">reflektierende Armbänder</a></li>
<li><a href="index.php?page=reflector">reflektierende Anhänger</a></li>
<li><a href="index.php?page=bags">Taschen</a></li>
<li><a href="index.php?page=lanyard2">Schlüsselbänder / Lanyards</a></li>
<li><a href="index.php?page=keychain2">Schlüsselanhänger</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Sicherheitsprodukte</a>
<ul>
<li><a href="index.php?page=reflarm2">reflektierende Armbänder</a></li>
<li><a href="index.php?page=reflector2">Reflektoren</a></li>
<li><a href="index.php?page=reflvest">Sicherheitswesten</a></li>
<li><a href="index.php?page=refljack">Sicherheitsjacken</a></li>
<li><a href="index.php?page=reflshirt">Sicherheits-T-Shirts</a></li>
</ul>
</li>
<li><a title="Click to open or close this section" href="#">Anstecknadeln / Pins</a>
<ul>
<li><a href="index.php?page=button">Buttons</a></li>
<li><a href="index.php?page=pin">Pins</a></li>
</ul>
</li>
