[jQuery] Accordeon menu

maandag 4 januari 2010 22:36

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Heej,

Ik ben bezig met een website op mijn werk en als menu gebruik ik jquery als menu. De website staat in classic asp en het menu is als include in de pagina's gezet vanwege de werkbaarheid.
Dit werkt in principe naar behoren echter krijg ik 2 dingen niet voor elkaar;

1) Bij de 3de rij van list items(heb deze even sub-sub 1 genoemd) blijft het menu in dat gebied niet openstaan zoals de 1e en 2e rij dat wel doet nadat er op de link geklikt is. Dit komt natuurlijk omdat de pagina verandert wordt.

2) Ik wil een andere achtergrondkleur in het menu bij de actieve pagina.

Veel gezocht op internet, zie soms lappen tekst als 'oplossing' en ergens anders weer met enkele regels code… ik ben geen javascript expert dus kom er 1-2-3 niet uit.

De code
Index

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="robots" content="index,follow" />
        <meta name="author" content="x" />
        <meta name="description" content="x" />
        <meta name="keywords" content="x" />
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="content-language" content="nl" />
        <title>x</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="js/menu.js" type="text/javascript"></script>

    </head>

    <body>
    <div id="container">
        <div id="main">
              <div id="mainleft"><!-- #include file="menu.asp" --></div>
            </div>
    </div>
</body>

</html>

Menu

XHTML:

<% pageName = "menu" %>

<ul id="menu">
  <li> <a href="index.asp">Home</a> </li>
  <li> <a href="#">Header 2</a>
    <ul>
      <li><a href="#">sub</a>
        <ul>
          <li><a href="test.asp">sub-sub 1</a></li>
          <li><a href="test.asp">sub-sub 1</a></li>
          <li><a href="test.asp">sub-sub 1</a></li>
        </ul>
      </li>
      <li><a href="#">sub</a>
        <ul>
          <li><a href="test.asp">sub-sub 1</a></li>
          <li><a href="test.asp">sub-sub 1</a></li>
          <li><a href="test.asp">sub-sub 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">Header 3</a>
    <ul>
      <li><a href="test.asp">sub</a></li>
    </ul>
  </li>
  <li><a href="#">Header 4</a></li>
</ul>

jquery

JavaScript:

function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('fast');
}
);
}
$(document).ready(function() {initMenu();});

Cascading Stylesheet:

#menu {
    width:196px;
    min-height:200px;
    margin:0 0 0 24px;
    float:left;
}
ul#menu, ul#menu ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 196px;
}
ul#menu a {
    display: block;
    text-decoration: none;
}
ul#menu li {
    margin-top: 1px;
}
ul#menu li a {
    background: #c0362c;
    color: #fff;
    padding:4px;
}
ul#menu li a:hover {
    background: #003151;
}
ul#menu li ul li a {
    background: #ffffff;
    border-bottom:1px solid #bce2f8;
    color: #000;
    padding-left: 20px;
}
ul#menu li ul li a:hover {
    background: #fac2c0;
    border-left: 5px #fac2c0 solid;
    padding-left: 15px;
}
ul#menu li ul li ul li a {
    background:#ffffff;
    color:#c0362c;
    padding-left: 30px;
    border-bottom:0px;
}
ul#menu li ul li ul li a:hover {
    background: #ffffff;
    padding-left:30px;
    text-decoration:underline;
    border-left:#ffffff;
    border-bottom:0px;
}
.code {
    border: 1px solid #c0362c;
    list-style-type: decimal-leading-zero;
    padding: 5px;
    margin: 0;
}
.code code {
    display: block;
    padding: 3px;
    margin-bottom: 0;
}
.code li {
    background: #c0362c;
    border: 1px solid #c0362c;
    margin: 0 0 2px 2.2em;
}
.indent1 {
    padding-left: 2px;
}
.indent2 {
    padding-left: 3px;
}

[url="#/"]Hier[/url] kan je hem even werkend zien

Bvd

[ Voor 17% gewijzigd door Verwijderd op 04-06-2010 18:29 ]

maandag 4 januari 2010 22:39

Acties:

0 Henk 'm!

flashin

.

1 en 2) je moet op elke pagina dus bijhouden welke pagina geopend is, en aan de hand van die informatie moet je je menu openen en actief maken. Dit kun je serverside doen, maar ook goed clientside.

maandag 4 januari 2010 22:55

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

flashin schreef op maandag 04 januari 2010 @ 22:39:
1 en 2) je moet op elke pagina dus bijhouden welke pagina geopend is, en aan de hand van die informatie moet je je menu openen en actief maken. Dit kun je serverside doen, maar ook goed clientside.

Ja, heb al met pagenames gewerkt, ik weet alleen niet goed hoe ik die juist moet aanroepen.

maandag 4 januari 2010 22:58

Acties:

0 Henk 'm!

disjfa

be

Verwijderd schreef op maandag 04 januari 2010 @ 22:55:
[...]
Ja, heb al met pagenames gewerkt, ik weet alleen niet goed hoe ik die juist moet aanroepen.

komt omdat je nu wat probeert zonder echte namen te gebruiken. Als je nu eerst probeert je website te bouwen mbv hoe je je menu nu opbouwd, dan kan je daarna je druk maken om hoe je een structuur neerzet met je bestaande structuur.

Je probeert nu achterstevoren te werken. Eerst je fancy menutje bouwen, en dan mischien een website erachter. Probeer nu eerst gewoon je website te bouwen, dan komt dit komenderweg automatisch mee

disjfa - disj·fa (meneer)
disjfa.nl

maandag 4 januari 2010 23:08

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

disjfa schreef op maandag 04 januari 2010 @ 22:58:
[...]

komt omdat je nu wat probeert zonder echte namen te gebruiken. Als je nu eerst probeert je website te bouwen mbv hoe je je menu nu opbouwd, dan kan je daarna je druk maken om hoe je een structuur neerzet met je bestaande structuur.

Je probeert nu achterstevoren te werken. Eerst je fancy menutje bouwen, en dan mischien een website erachter. Probeer nu eerst gewoon je website te bouwen, dan komt dit komenderweg automatisch mee

De website is al grotendeels klaar

Heb het even gestript voor hier.

maandag 4 januari 2010 23:10

Acties:

0 Henk 'm!

disjfa

be

Verwijderd schreef op maandag 04 januari 2010 @ 23:08:
[...]
De website is al grotendeels klaar Heb het even gestript voor hier.

Dus dan weet je op welke pagina je zit, dus kan je bijvoorbeeld een classe meegeven aan het menu wat open zou moeten klappen. En dus blijft dat je menu open geklapt op de pagina naar keuze

En aangezien je dan een classe meegeeft aan een actieve menu kan je ook de kleur ervan veranderen.

[ Voor 11% gewijzigd door disjfa op 04-01-2010 23:11 ]

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 5 januari 2010 12:45

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

disjfa schreef op maandag 04 januari 2010 @ 23:10:
[...]

Dus dan weet je op welke pagina je zit, dus kan je bijvoorbeeld een classe meegeven aan het menu wat open zou moeten klappen. En dus blijft dat je menu open geklapt op de pagina naar keuze

En aangezien je dan een classe meegeeft aan een actieve menu kan je ook de kleur ervan veranderen.

Dat is een beetje het probleem, mijn kennis van jquery/javascript is erg gering. Ik weet dus niet hoe ik een class kan 'activeren'…

dinsdag 5 januari 2010 12:52

Acties:

0 Henk 'm!

DEiE

google maar eens op jQuery add class

Met jQuery kan je met wat zoekwerk ook vinden hoe je de filename ophaald, dan kan je een vergelijking zetten op de link en de filename, en dan eventueel de class erbij zetten

[ Voor 69% gewijzigd door DEiE op 05-01-2010 12:54 ]

Onderwerpen