menu bar (spry)

Status
Niet open voor verdere reacties.
J

JMo

Gebruiker
Lid geworden
22 dec 2012
Berichten
106
In een spry menu heb ik;
HTML: 
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Stichting</a>
      <ul>
        <li><a href="ziektebeeld.html">Ziektebeeld</a></li>
        <li><a href="geschiedenis.html">Geschiedenis Stichting</a></li>
        <li><a href="doel en beleid.html">Doel en beleid</a></li>
        <li><a href="zorgvisie.html">Zorgvisie</a></li>
        <li><a href="zorgverlener ASVZ.html">Zorgverlener ASVZ</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Bestuur</a>
      <ul>
        <li><a href="#">Samenstelling</a></li>
        <li><a href="#">Taak</a></li>
        <li><a href="#">Rol van de familie</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Nieuws</a>
      <ul>
        <li><a href="#">Activiteiten</a>        </li>
        <li><a href="#">Foto's</a></li>
        <li><a href="#">Jaarverslag</a></li>
        <li><a href="#">Jaarrekening</a></li>
      </ul>
    </li>
    <li><a href="#">Links</a></li>
  </ul>

De links in mijn menu voor item Stichting zouden moeten werken
en naar de links in genoemde html pagina's moeten gaan.

Waarom werkt dit niet in de praktijk>? Ik kan wel klikken maar
er veranderd niks en mijn home page blijft zichtbaar.
 
Om welke site gaat het?
 
Een testversie van een site voor een stichting. Die zou toch ook
op mijn pc moeten werken? De bladen staan allemaal in de root
directory. Dus zou ik kunnen testen. Dit is heel de index.html;

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#apDiv1 {
	position: absolute;
	width: 817px;
	height: 50px;
	z-index: auto;
	background-color: #999;
}
body,td,th {
	font-family:Arial, Helvetica, sans-serif;
	color: #FFF;
	background-color: #666666;
} 
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">    
#apDiv2 {
	position: absolute;
	width: 641px;
	height: 550px;
	z-index: auto;
	top: 82px;
	background-color: #666666;
	left: 410px;
}
#apDiv3 {
	position: absolute;
	width: 325px;
	height: 467px;
	z-index: auto;
	left: 37px;
	top: 84px;
}
#apDiv4 {
	position: absolute;
	width: 641px;
	height: 252px;
	z-index: auto;
	left: 410px;
	top: 308px;
	background-color: #999;
}
#apDiv5 {
	position: absolute;
	width: 189px;
	height: 70px;
	z-index: auto;
	left: 854px;
	top: 7px;
} 
     
</style>

</head>
<body>



<div id="apDiv3"><img src="image/Gebouw.png" width="325" height="467" /></div>
<div id="apDiv1">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Stichting</a>
      <ul>
        <li><a href="ziektebeeld.html">Ziektebeeld</a></li>
        <li><a href="geschiedenis.html">Geschiedenis Stichting</a></li>
        <li><a href="doel en beleid.html">Doel en beleid</a></li>
        <li><a href="zorgvisie.html">Zorgvisie</a></li>
        <li><a href="zorgverlener ASVZ.html">Zorgverlener ASVZ</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Bestuur</a>
      <ul>
        <li><a href="#">Samenstelling</a></li>
        <li><a href="#">Taak</a></li>
        <li><a href="#">Rol van de familie</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Nieuws</a>
      <ul>
        <li><a href="#">Activiteiten</a>        </li>
        <li><a href="#">Foto's</a></li>
        <li><a href="#">Jaarverslag</a></li>
        <li><a href="#">Jaarrekening</a></li>
      </ul>
    </li>
    <li><a href="#">Links</a></li>
  </ul>
</div>
    
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
    
<div id="apDiv5"><img src="image/Logo Org wit 450x210.png" width="179" height="74" /></div>
</body>
</html>
 
Er wordt één blad ingeladen en vervolgens kun je de overige niet gebruiken.
 
Wat bedoel je met blad? En hoe test je uit?
Heb je een (lokale) webserver geïnstalleerd?
 
Ik heb geen lokale webserver. Blad = html pagina. Kan ik helemaal niks testen
zonder server? Als ik bijvoorbeeld index.html gebruik met het menu bovenaan
(dubbel klik in browser). Dan kan ik in submenu Stichting éénmaal een html link
gebruiken bijvoorbeeld ziektebeeld. Deze ziektebeeld.html laadt in en ik zie de tekst.
Verder klikken op iets heeft geen zin. Ik weet niet waarom.
 
JMo zei:
Ik heb geen lokale webserver. Blad = html pagina. Kan ik helemaal niks testen
zonder server? Als ik bijvoorbeeld index.html gebruik met het menu bovenaan
(dubbel klik in browser). Dan kan ik in submenu Stichting éénmaal een html link
gebruiken bijvoorbeeld ziektebeeld. Deze ziektebeeld.html laadt in en ik zie de tekst.
Verder klikken op iets heeft geen zin. Ik weet niet waarom.
Klik om te vergroten...

Ik kan mij herinneren dat bepaalde browsers moeilijk doen als ze via file:// in de website externe dingen moeten inladen. Gevalletje van veiligheid volgens mij.
Daarom raad ik aan de boel te uploaden (desnoods naar een testlocatie), of een webserver te installeren.
 
Zojuist alles geupload. Alleen geen succes, het lijkt wel of alle bladen uit het submenu status visited krijgen??
Een hash tag # achter de html pagina?
 
Dat heten anchors, waarmee je met een #hashtag erheen kan navigeren. Kan je anders eens wat in JSfiddle.net laten zien?
 
Code: 
<li><a [B]href="#"[/B] class="MenuBarItemSubmenu">Bestuur</a>
   <ul>
      <li><a href="pagina1.html">Samenstelling</a></li>
      <li><a href="pagina2.html">Taak</a></li>
   </ul>
</li>

Dit stukje html is een typisch stukje html van een menu dat geschikt is voor gewoon scherm (pc) én touch scherm (smartphone). Voor de <a href="#" …> wordt dan een script toegevoegd waarmee dit linkje een drukknop wordt om het onderliggende submenu in- en uit te vouwen.

Het script "SpryMenuBar.js" ken ik niet maar het lijkt erop dat dit script dit moet verzorgen.


Aanv. houdt er rekening mee dat dit menu van Adobe gedateerd is (uit 2006).
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan