Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: adding drop-down menus to an existing website

  1. #1
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default adding drop-down menus to an existing website

    Hello, newbie here w/ somewhat limited programming skills so please try to bare with me - thanks.

    I purchased a web template (I know strike one), and I want to add drop down menus (or fly-out menus) to the main navigation buttons on the index page, but really don't know how. I have visited a few do-it-yourself sites, but nothing seems to work or their being built from scratch.

    This is my template:http://szocik.com/template/

    If anyone could guide me w/ the code for one of the buttons, Iím guessing i could take it from there.

    Thank you for your time and consideration.


    lgw

  2. #2
    Join Date
    Sep 2008
    Location
    Whiteford, MD
    Posts
    39
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    You should be able to do this all with CSS. I recommend you looking into Suckerfish menus. I assume when you mean "flyout menus" I think you mean rollover menus. What the idea for it is, for the 2nd level of navigiation, give it an ID/class and give it properties you want for style and give display:none to it, and on the top navigational part, when hovered set it to display:block;. Got to go to homeroom now.

  3. #3
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes, I do mean fly out menus. But, is there a simple way to add code to the buttons to add them tot he existing template I have - as opposed to making new ones? thanks,

  4. #4
    Join Date
    Sep 2008
    Location
    Whiteford, MD
    Posts
    39
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    Make sure you use classes on your original menu, and you can reuse them . Cheers.

  5. #5
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sorry, but I don't understand your message - newbie here.

  6. #6
    Join Date
    Sep 2008
    Location
    Whiteford, MD
    Posts
    39
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    Show your code for your original flyout menu. Oh, and if your a newbie how do you know what you want is called a flyout menu? We call those rollover menus...

  7. #7
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by SpOrTsDuDe-Reese View Post
    Show your code for your original flyout menu. Oh, and if your a newbie how do you know what you want is called a flyout menu? We call those rollover menus...
    would this be it?

    <!-- Begin


    var menuwidth = "161" // WIDTH OF THE LEFT MENU AND SIDEBAR
    var date = "yes" // SHOW DATE


    // NOTE: If you use a ' add a slash before it like this \'

    document.write('<div id="sidebar" class="menu-layer">');
    document.write('<TABLE cellpadding="0" cellspacing="0" border="0" width="'+menuwidth+'" class="printhide">');
    document.write('<tr><td>');

    document.write('<a href="index.html" class="menu">Home</a>');


    // NOTE: COPY AND PASTE THE NEXT 2 LINES TO MAKE A NEW LINK


    document.write('</td></tr><tr><td>');
    document.write('<a href="about.htm" class="menu">About</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="news.htm" class="menu">News</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="quotes.htm" class="menu">Quotes</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="clients.htm" class="menu">Clients</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="resources.htm" class="menu">Resources</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="careers.htm" class="menu">Careers</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="services.htm" class="menu">Services</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="gallery1.htm" class="menu">Gallery / Products</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="staff.htm" class="menu">Our Staff</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="faq-home.htm" class="menu">F.A.Q.</a>');


    document.write('</td></tr><tr><td>');
    document.write('<a href="calendar.htm" class="menu">Event Calendar</a>');


    // END MENU LINKS



    document.write('</td></tr><tr><td align="center" valign="middle">');
    document.write('<img src="picts/spacer.gif" HEIGHT="1" width="'+menuwidth+'"><br>');
    document.write('</td></tr></table>');
    document.write('</div>');




    // End -->

  8. #8
    Join Date
    Sep 2008
    Location
    Whiteford, MD
    Posts
    39
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    document.write() only writes stuff to the page when the page is loaded. Unless this is the same case it is impossible to use the document.write() for this.

  9. #9
    Join Date
    Sep 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok. that must pertain to something else on the bottom of the page - I should have left it off.

  10. #10
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default menu code

    This is your code i have no idea how to incorporate suckerfish into this though never done it with tables.
    Code:
    <script language="JavaScript" type="text/javascript" src="menu.js">
    </script><div id="sidebar" class="menu-layer"><table class="printhide" 
    border="0" cellpadding="0" cellspacing="0" width="161"><tbody><tr>
    <td><a href="index.html" class="menu">Home</a></td></tr><tr>
    <td><a href="about.htm" class="menu">About</a></td></tr><tr>
    <td><a href="news.htm" class="menu">News</a></td></tr><tr>
    <td><a href="quotes.htm" class="menu">Quotes</a></td></tr>
    <tr><td><a href="clients.htm" class="menu">Clients</a></td>
    </tr><tr><td><a href="resources.htm" class="menu">Resources</a>
    </td></tr><tr><td><a href="careers.htm" class="menu">Careers</a>
    </td></tr><tr><td><a href="services.htm" class="menu">Services</a>
    </td></tr><tr><td><a href="gallery1.htm" class="menu">Gallery / Products</a>
    </td></tr><tr><td><a href="staff.htm" class="menu">Our Staff</a>
    </td></tr><tr><td><a href="faq-home.htm" class="menu">F.A.Q.</a>
    </td></tr><tr><td><a href="calendar.htm" class="menu">Event Calendar</a>
    </td></tr><

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
  •