AsaMedlem sedan dec. 20011 934 inlägg
Har denna kod som är byggt på Ifsatser i asp och html men vill nu göra om den till en meny i javascript så jag skipper ladda om sidan vid ex klick på Webbutveckling.
Nån som kan hjälpa mig. Ska funka i IE, NS och Opera helst!
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="151">
<tr>
<td width="100%" height="19" background="gfx/menybg.gif">
<a class="vit" href="main.asp"><b>Startsidan</b></a>
</td>
</tr>
<tr>
<td width="100%" height="5"></td>
</tr>
<tr>
<td width="100%" height="19" background="gfx/menybg.gif">
<a class="vit" href="main.asp?cat=web"><b>Webbutveckling</b></a>
</td>
</tr>
<%If Request.QueryString("cat") = "web" Then%>
<tr>
<td width="100%" height="19" background="gfx/m2bg.gif" align="right"><a href="main.asp?cat=web&ucat=html" <%If Request.QueryString("ucat") = "html" Then%>class="aktiv"<%Else%>class="vit"<%End If%>><b>Html-kurser</b></a> </td>
</tr>
<tr>
<td width="100%" height="19" background="gfx/m2bg.gif" align="right"><a href="main.asp?cat=web&ucat=css" <%If Request.QueryString("ucat") = "css" Then%>class="aktiv"<%Else%>class="vit"<%End If%>><b>Css-kurser</b></a> </td>
</tr>
<%Else%>
<tr>
<td width="100%" height="5"></td>
</tr>
<%End If%>
<tr>
<td width="100%" height="19" background="gfx/menybg.gif">
<a class="vit" href="main.asp?cat=about"><b>Om Gruvsjo</b></a>
</td>
</tr>
<%If Request.QueryString("cat") = "about" Then%>
<tr>
<td width="100%" height="19" background="gfx/m2bg.gif" align="right"><a href="main.asp?cat=about&ucat=asa" <%If Request.QueryString("ucat") = "asa" Then%>class="aktiv"<%Else%>class="vit"<%End If%>><b>Åsa Gruvsjö</b></a> </td>
</tr>
<tr>
<td width="100%" height="19" background="gfx/m2bg.gif" align="right"><a href="main.asp?cat=about&ucat=teckningar" <%If Request.QueryString("ucat") = "teckningar" Then%>class="aktiv"<%Else%>class="vit"<%End If%>><b>Teckningar</b></a> </td>
</tr>
<%Else%>
<tr>
<td width="100%" height="5"></td>
</tr>
<%End If%>
<tr>
<td width="100%" height="5"></td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
</table>
Peter SMedlem sedan dec. 20025 484 inlägg
Jag har använt "ul"- samt "li"-element till menyn istället:
<style type="text/css">
<!--
ul#menu{
list-style : none;
margin : 0;
padding : 0;
width : 151px;
}
ul#menu li.main{
background : url(gfx/menybg.gif);
}
ul#sub1, ul#sub2{
list-style : none;
display : none;
margin : 0;
padding : 0;
}
ul#sub1 li, ul#sub2 li{
background : url(gfx/m2bg.gif);
margin : 0;
padding : 0;
}
ul#sub1 li a, ul#sub2 li a{
margin-left : 40px;
}
-->
</style>
<script type="text/javascript">
<!--
function showHide(s){
var e=getElm(s);
if(e){
e.style.display=(e.style.display=="")?"block":"";
return false;
}
};
function getElm(s){
switch(true){
case typeof(document.all)=="object":
return document.all[s];
case typeof(document.getElementById)=="function":
return document.getElementById(s);
default:
return 0;
}
};
//-->
</script>
...
<ul id="menu">
<li class="main"><a href="main.asp" class="vit">Startsidan</a></li>
<li class="main"><a href="main.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></li>
<ul id="sub1">
<li><a href="main.asp?cat=web&ucat=html">HTML-kurser</a></li>
<li><a href="main.asp?cat=web&ucat=css">CSS-kurser</a></li>
</ul>
<li class="main"><a href="main.asp?cat=about" onclick="return showHide('sub2')" class="vit">Om Gruvsjo</a></li>
<ul id="sub2">
<li><a href="main.asp?cat=about&ucat=asa">Åsa Gruvsjö</a></li>
<li><a href="main.asp?cat=about&ucat=teckningar">Teckningar</a></li>
</ul>
</ul>
:)
AsaMedlem sedan dec. 20011 934 inlägg
Jag vill ha med tabeller för att det ska passa med designen jag har på min sida!
Peter SMedlem sedan dec. 20025 484 inlägg
Vill ha och vill ha ;)
<style type="text/css">
tr#sub1 td table,tr#sub2 td table{
margin-left : 30px;
}
tr#sub1,tr#sub2{
display : none;
}
</style>
<script type="text/javascript">
<!--
function showHide(s){
var e=getElm(s);
if(e){
if(document.all && !window.opera){
e.style.display=(e.style.display==""||e.style.display=="none")?"block":"none";
return false;
}
if(document.getElementById){
e.style.display=(e.style.display==""||e.style.display=="none")?"table-row":"none";
return false;
}
}
};
function getElm(s){
switch(true){
case typeof(document.all)=="object":
return document.all[s];
case typeof(document.getElementById)=="function":
return document.getElementById(s);
default:
return 0;
}
};
//-->
</script>
...
<table border="1" width="151" cellpading="0" cellspacing="0">
<tr><td><a href="main.asp" class="vit">Startsidan</a></td></tr>
<tr><td><a href="main.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></td></tr>
<tr id="sub1"><td colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="main.asp?cat=web&ucat=html">HTML-kurser</a></td></tr>
<tr><td><a href="main.asp?cat=web&ucat=css">CSS-kurser</a></td></tr>
</table>
</td></tr>
<tr><td><a href="main.asp?cat=about" onclick="return showHide('sub2')" class="vit">Om Gruvsjo</a></td></tr>
<tr id="sub2"><td colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="main.asp?cat=about&ucat=asa">Åsa Gruvsjö</a></td></tr>
<tr><td><a href="main.asp?cat=about&ucat=teckningar">Teckningar</a></td></tr>
</table>
</td></tr>
</table>
:)
AsaMedlem sedan dec. 20011 934 inlägg
AsaMedlem sedan dec. 20011 934 inlägg
Men om jag vill att Om Gruvsjo menyn ska stängas när jag klickar på Webbutveckling då. Hur skriver jag då? Och att om jag klickat på länken main.asp?cat=web&ucat=html under Webbutveckling så ska just den menyn vara öppen.
Peter SMedlem sedan dec. 20025 484 inlägg
<script type="text/javascript">
<!--
function find(){
if(!(location.search&&location.search.indexOf("cat")>-1))
return;
var
d=location.search.split("cat=")[1].split("&")[0],
e=getElm(d=="web"?"sub1":"sub2");
if(!(e||d=="web"||d=="about"))
return;
e.style.display=(document.all&&!window.opera)?"block":"table-row";
};
function showHide(s){
var e=getElm(s);
if(e){
var t=getElm(e.id=="sub1"?"sub2":"sub1");
if(document.all && !window.opera){
if(t.style.display=="block")
t.style.display="none";
e.style.display=(e.style.display==""||e.style.display=="none")?"block":"none";
return false;
}
if(document.getElementById){
if(t.style.display=="table-row")
t.style.display="none";
e.style.display=(e.style.display==""||e.style.display=="none")?"table-row":"none";
return false;
}
}
};
function getElm(s){
switch(true){
case typeof(document.all)=="object":
return document.all[s];
case typeof(document.getElementById)=="function":
return document.getElementById(s);
default:
return 0;
}
};
window.onload=function(){
find();
};
//-->
</script>
:)
AsaMedlem sedan dec. 20011 934 inlägg
Men det som gör att alla menyer stänger sig när jag klickar på en ny då? Så bara en meny kan vara öppen åt gången?!
Hur lägger man till fler "huvudmenyer med undermeny"?
För jag har 6 "menyer"!
Peter SMedlem sedan dec. 20025 484 inlägg
JavaScript-koden i mitt senaste inlägg kombinerat med HTML-koden för tabellerna som jag postade gången före det, gör att bara en meny är öppen åt gången.
Vad är det mer för menyer respektive undermenyer du vill ha med?
:)
AsaMedlem sedan dec. 20011 934 inlägg
Räcker detta? Kategorier com är efter cat=
web, about ,place, script, layout och linkz
Peter SMedlem sedan dec. 20025 484 inlägg
Jag har lagt upp ett exempel här.
:)
AsaMedlem sedan dec. 20011 934 inlägg
Supertack för din hjälp! Mycket snällt av dig :)
Jag glömde dock en till undermeny och försöker lägga in den själv men det strular bara! Javascript och jag = 0. Försöker fatta din kod men det går inge bra.
Vad är det jag ska ändra å lägga till om jag vill lägga till fler i menyn?!!
Har ju redan dessa:
web, about ,place, script, layout och linkz
Men glömde ha med fun och pics. Där pics ej ska ha någon undermeny!
Hoppas du vill hjälpa mig igen.
kbkingMedlem sedan mars 2003167 inlägg
Vi är fler som följer denna tråd med stort intresse dock inte med fullt lika stort kunnande.
En handledning som beskriver hur man ska gå tillväga för att modifiera det "upplagda" exemplet efter egna behov, hade därför varit guld värd!
AsaMedlem sedan dec. 20011 934 inlägg
Precis vad jag oxå önskar!
Peter SMedlem sedan dec. 20025 484 inlägg
Ok, jag ber om ursäkt var eventuella otydligheter :r Den egentliga meningen med skriptet var att skapa en färdig lösning åt Åsa, men jag har nu försökt skriva om det något för att förhoppningsvis göra det enklare för andra intresserade att använda det.
Jag har som sagt skrivit om koden lite grand, samt lagt till lite kommentarer. Det exempel som finns online är anpassat för just Åsa. Jag kommer att uppdatera det ytterligare för andra inom en snar framtid.
Skulle problem uppstå eller någonting fungera knasigt är det bara att skicka iväg ett e-postmeddelande till mig (eventuellt ställa frågan i detta forum).
:)
kbkingMedlem sedan mars 2003167 inlägg
Menyn uppför sig likadant som den Designbutiken har på sin sida, vilket är både navigeringsvänligt och stilrent. Dom fick förresten pris för sin hemsideslösning för något år sedan. För den intresserade finns menyn att beskåda här. Ytterligare en ynnest att be om vore därför en handledning som inkluderar även gifbilder för huvudkategorierna i likhet med DB's exempel.
/kbking
AsaMedlem sedan dec. 20011 934 inlägg
Tackar för all hjälp och jag återkommer om jag får mer problem men det ska nog gå bra nu!
Supertack återigen!
------------------------
Kom på en grej till. När menyerna är stängda vill jag ha en rad under som är synlig men när jag öppnar en meny ska den inte synas. Vet du hur jag ska göra? Den fetstilta i koden nedan. Är en sådan under varje "Huvudmeny". Som sen ska "gömmas" vid öppning av en "meny". Hoppas du förstår och att det går!
<tr><td><a href="menu.asp?cat=web" onclick="return showHide('sub1')" class="vit">Webbutveckling</a></td></tr>
<tr id="sub1"><td colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="menu.asp?cat=web&ucat=html">HTML-kurser</a></td></tr>
<tr><td><a href="menu.asp?cat=web&ucat=css">CSS-kurser</a></td></tr>
</table>
</td></tr>
[b]<tr><td width="100%" height="5"></td></tr>[/b]
kbkingMedlem sedan mars 2003167 inlägg
Jag snubblade över en annan bra lösning som paynova har. Jag har tagit ner de båda javascripten som styr menyn och css koden och försöker lista ut hur menyn är uppbyggd. Helt rätt har jag antagligen inte gjort, men jag har fått det att röra på sig någorlunda likadant. Något jag inte blir klok på är varför startsidan inte har ett vanligt namn med en .html eller .asp ändelse. Det som syns i webläsaren är: h??ps://www.paynova.com/swe/?ICP=.
Vad står de tecknen för och varför ser det ut på detta vis?
PS. Startsidan syns faktiskt oavsett om det i webbläsaren står .../swe/?ICP= eller ...swe/?icp= eller .../swe/
Som sagt en tilltalande lösning... :)
Peter SMedlem sedan dec. 20025 484 inlägg
Sidan är nu uppdaterad.
:)
AsaMedlem sedan dec. 20011 934 inlägg
Tackar. Det var bara menu.js som man skulle byta ut va?
