469,898 Members | 1,550 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

Horizontal ASP menu based on CSS mouse states?

Hi! I'm currently working on a menu which is based on CSS and is listed with <li> tags. The CSS code looks like this:

Expand|Select|Wrap|Line Numbers
  1. #nav {
  2. position: absolute;
  3. top: 101px;
  4. left: 390px;
  5. list-style: none;
  6. margin: 0;
  7. padding: 0;
  8. height: 28px;
  9. display: inline;
  10. overflow: hidden;
  11. width: 603px;
  12. background: url(Html/Img/site/menu/navbar.gif)
  13. }
  14.  
  15. #nav li {
  16. position:relative;
  17. float:left;
  18. margin: 0; 
  19. padding: 0;
  20. display: inline;
  21. overflow: hidden;
  22. list-style-type: none;
  23. }
  24.  
  25. #nav a {
  26. float: left;
  27. padding: 28px 0 0 0;
  28. overflow: hidden;
  29. height: 0px !important; height /**/:20px; /* for IE5/Win */
  30. }
  31.  
  32. #nav a:hover {
  33. background-position: 0 -28px;
  34. }
  35.  
  36. #nav a:active, #nav a.selected {
  37. background-position: 0 -56px;
  38. }
  39.  
  40. #hjem a  {
  41. width: 58px;
  42. background: url(Html/Img/site/menu/hjem.gif) top left no-repeat;
  43. }
  44.  
  45. #hjelp a  {
  46. width: 107px;
  47. background: url(Html/Img/site/menu/hjelp.gif) top left no-repeat;
  48. }
  49.  
  50. #brukerveil a  {
  51. width: 140px;
  52. background: url(Html/Img/site/menu/brukerveil.gif) top left no-repeat;
  53. }
  54.  
  55. #e-learn a  {
  56. width: 126px;
  57. background: url(Html/Img/site/menu/e-learn.gif) top left no-repeat;
  58. }
  59.  
  60. #forum a  {
  61. width: 65px;
  62. background: url(Html/Img/site/menu/forum.gif) top left no-repeat;
  63. }
  64.  
  65. #kontakt a  {
  66. width: 96px;
  67. background: url(Html/Img/site/menu/kontakt.gif) top left no-repeat;}    
  68. .leftmenu_wrap {
  69. float: left;
  70. }
  71.  
And the HTML code looks like this:

Expand|Select|Wrap|Line Numbers
  1. <ul id="nav">
  2. <li id="hjem"><a href="#"></a></li>
  3.     <li id="hjelp"><a href="#"></a></li>
  4.     <li id="brukerveil"><a href="#"></a></li>
  5.     <li id="e-learn"><a href="#"></a></li>
  6.     <li id="forum"><a href="#"></a></li>
  7.   <li id="kontakt"><a href="#"></a>        </li></ul>
  8.  
  9. </div>
  10.  
Pretty basic so far right? So, I was browsing the net and came across this ASP script: http://www.asp101.com/articles/prabh...ar/default.asp

And now I'm trying to merge these together the best way I can, but I don't understand anything.. The ASP menu in the link posted above is based on tables and not css! So how can I do the same thing only with my own menu?
Would someone care to explain or perhaps copy and paste a little to perhaps create a working example? Shouldn't be that hard should it? I just can't wrap my head around the html table codes in the ASP-files cause each entry in the menu has it's own asp-file and the menu gets sorta compiled from each of these files and with another file where the rest of the menu lies (include/common.asp).
Dec 13 '07 #1
3 5180
bumpybumpbump bumpitybump. Really need some help on this. Isn't it possible to use css code in the asp tags? Is there something I can put in the original code to better understand what is what and how the menu gets created dynamically?
Dec 14 '07 #2
acoder
16,027 Expert Mod 8TB
I don't know the exact ASP syntax, but you could check the current page. Let's say it's hjem.asp. If it is, then set the 'hjem' LI element to an 'active' class. In your CSS, you will need to set the properties of this active class:
Expand|Select|Wrap|Line Numbers
  1. .active { ... }
I think that should be enough to solve your problem. Hopefully, one of the ASP experts can help you with the ASP syntax.
Dec 14 '07 #3
jhardman
3,406 Expert 2GB
Kenny,

Your css-based code is actually better, the table based menu you linked to is terrible. The great thing the ASP code did was put all of the menu in a separate file which can be included in every page in your site. You can do this with your menu, just put the entire menu in a separate file, and include that in every file you want to have the menu. The code you linked to used some function call to highlight which page you were already on to make it obvious that that link in the menu is different from the rest, that is the only useful part of that code. Let me know if this helps.

Jared
Dec 17 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Ansgar Hein | last post: by
7 posts views Thread by addled | last post: by
reply views Thread by Just D. | last post: by
1 post views Thread by Stephen | last post: by
2 posts views Thread by Sergio E. | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.