Avatar billede djsteiner Nybegynder
21. september 2008 - 14:27 Der er 7 kommentarer og
1 løsning

Tabs menu med asp og css

Hej jeg står og er ved at lave en tabsmenu (faneblad menu).

Hvor jeg har et problem så jeg håber jeg kan få hjælp til.

Menu skulle gerne virke sådan at når man trykker på et af fane bladene skulle denne så gerne skrifte farve.

Måske man kunne lave en if struktur sammesat med en span class til (farve skift).

jeg har lavet en css fil som ser sådan her ud:

div#menubar {


   
    font-size: 13px;
    height: 30px;
    width:657px;
    position: relative;
    margin-top: 137px;
    margin-left:154px;
    z-index:1;
   
}       


ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

ol#toc li {
    float: left;
    margin: 0 1px 0 0;
}

ol#toc a {
    background:  url(../images/tab.png);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    text-decoration: none;
}

ol#toc a:hover {
    background-color: ;
    background-position: 0 -120px;
}

ol#toc a:hover span {
    background-position: 100% -120px;
}

ol#toc li.current a {
    background-color: ;
    background-position: 0 -60px;
    color: #fff;
    font-weight: bold;
}

ol#toc li.current span {
    background-position: 100% -60px;
}

ol#toc span {
    background: url(../images/tab.png) 100% 0;
    display: block;
    line-height: 2em;
    padding-right: 10px;
}


på forhånd tak for hjælpen.
Avatar billede w13 Novice
21. september 2008 - 14:31 #1
Skifter den side, når du klikker på en span? Så bør du måske løse det med Sessions og evt. kombineret med noget QueryString, det bliver bare hurtigt en rodet løsning.

Hvis den ikke skifter side, er det intet problem. Så skal det bare laves i JavaScript og ikke ASP, og så bør du spørge under JavaScript også.
Avatar billede w13 Novice
21. september 2008 - 14:32 #2
*spørge under JavaScript i stedet.

Man må jo ikke have flere ens spørgsmål her på E. =)
Avatar billede djsteiner Nybegynder
21. september 2008 - 15:04 #3
den skifter over til en anden case
Avatar billede w13 Novice
21. september 2008 - 15:31 #4
Så må det løses med Sessions/Querystrings.
Avatar billede w13 Novice
27. september 2008 - 13:02 #5
Hmm, jeg tror faktisk, jeg ville løse det ved at aflæse url'en og så ud fra den bestemme, hvilket menupunkt, der skal markeres.
Avatar billede djsteiner Nybegynder
14. februar 2009 - 17:17 #6
Hej jeg har selv fundet en løsning på en Tabs menu den kommer her:

Her til er der noget Css men det skulle være til at gå til.


<!-- #include file="includes/dbconnect.asp" -->

<%    gid = request.QueryString("g_id")%>
   
<!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=iso-8859-1" />
    <title>Tabe Menu</title>
  <link href="tabe_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<%    sql = "SELECT * FROM  g_menu Order By g_id"
                        set rs = Conn.Execute(sql)
                       
    if not (rs.bof or rs.eof) then
        do until rs.eof   
            if CLng(rs("g_id")) = CLng(gid) then    %>
            <a href="?g_id=<% =rs("g_id") %>" class="menu" id="selected"><% =rs("g_kat") %></a> 
<%            else    %>   
            <a href="?g_id=<% =rs("g_id") %>" class="menu"><% =rs("g_kat") %></a>
<%            end if
        rs.movenext
        loop
    end if
    set rs = nothing    %><br /> 
    </div>
</body>
</html>
Avatar billede djsteiner Nybegynder
19. april 2009 - 15:13 #7
Her er lidt kode til submenu


var_gid = request.QueryString("gid")
                   
                   
                    sqlsubmenu = "SELECT * FROM s_menu WHERE s_type="&gid
                    'response.Write sql'
                    'response.End()
                    set rs_submenu = Conn.Execute(sqlsubmenu)
                   
           
                    if not (rs_submenu.bof or rs_submenu.eof) then
                    do until rs_submenu.eof
                    if CLng(rs_submenu("s_id")) = CLng(sid) then    %>
                   


                    <a class="submenu" id="sub_selected" href="untitled.asp?page=ref&gid=<%=var_gid%>&sid=<%=rs_submenu("s_id")%>"><%=rs_submenu("s_navn")%></a><br />
                    <%else%>
                          <a class="submenu"  href="untitled.asp?page=ref&gid=<%=var_gid%>&sid=<%=rs_submenu("s_id")%>"><%=rs_submenu("s_navn")%></a><br />
                  <%end if%>     
                       
                <%
                            rs_submenu.movenext
                            loop
                            end if
                            end if
               
                %>
Avatar billede djsteiner Nybegynder
19. april 2009 - 15:15 #8
Her lidt css som kan bruges til Menuer.


/*----------------------------------------------Menu--Class------------------------*/


a img {border:none;}


a.menu{background: url(../images/tab_gray.png) no-repeat;
width:115px;
height:58px;
float: left;
padding-right:3px;
position: relative;
}
   
   
   

   

a.menu:visited{background: url(../images/tab_gray.png) no-repeat;
width:115px;
height:58px;
float: left;
position: relative;
padding-right:3px;

}



   
   
   


a.menu:active{background: url(../images/tab_gray.png);
width:115px;
height:58px;
float: left;
position: relative;
padding-right:3px;

}   
 
   

a.menu:hover{background: url(../images/tab_green1.png) no-repeat;
width:115px;
height:58px;
float: left;
position: relative;
padding-right:3px;
}       
   
   


a#selected    {background: url(../images/tab_green1.png) no-repeat;
width:115px;
height:58px;
float: left;
position: relative;
padding-right:3px;
}




/*------------------------------------------Sub----Menu--------------------------*/




   
   
a.submenu,
a.submenu:visited,
a.submenu:active    {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-decoration:none;    }
   
a.submenu:hover    {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #c2ff0c;
text-decoration:none;    }
   
a#sub_selected    {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #c2ff0c;
text-decoration:none;    }
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester