SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    melbourne
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DHTML Slide tree menu

    If anyone can help me find a free resource for creating a verticle slide tree menu system that allows the use of images for the navigation I would really appreciate it. I have found many scripts that allow background images but NONE that have rollover images for the links.

    Thanks


    NB: this is a link of an example menu system I would like to build using JS.

    http://web.paragonservices.com/produ...ava/slidem.htm

    I also have an example of the code:

    div.clSlideMenu{ /* All slideMenu2 DIV elements */
    position:absolute;
    font-family:verdana,arial,helvetica;
    font-size:10px;
    overflow:hidden;
    width:150;
    height:22;
    }


    I would like to change the CSS into image files ... I have spent many hours looking for a solution so any help would really be appreciated.
    Last edited by djungo; Dec 18, 2003 at 02:32.

  2. #2
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sure you can find a nice menu overhere: http://www.dhtmlcentral.com/

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    melbourne
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by langedav
    I'm sure you can find a nice menu overhere: http://www.dhtmlcentral.com/
    Thanks, but I have searched these scripts and they all use CSS for the links. I'm after something that uses rollover images for the links.

  4. #4
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suppose you could use css for creating rollover images too? Make your buttons using a list, something like this:

    HTML Code:
     #nav ul {
     	position: absolute;
     	top: 100px;
     	list-style-type: none;
     	width: 150px;
     	padding: 0;
     	margin: 0;
     	background: #999999;
     	color: #333333;
     	border-top: solid 1px #333333;
     	border-bottom: solid 1px #cccccc;
     	font: 10pt verdana, Arial, sans-serif;
     	text-align: right;
        }
    Then you define two different classes for the links. One normal and one hover like this:

    HTML Code:
     #nav li a {
        display: block;
        padding: 4px;
        margin: 0;
        background: #999999;
        color: #000000;
        border-left: 0px solid #333333;
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #333333;
        font: 10pt verdana, Arial, sans-serif;
        text-decoration: none;
        }
     	
     
     #nav li a:hover {
        background: #666666;
        color: #000000;
        border-left: 1px solid #333333;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;
        font: 10pt Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        }

    In stead of a background color you can use a background image :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •