SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replace side menu with horizontal drop down in Joomla template?

    How can I change the sidemenu with a horizontal drop down menu in diasporamessenger.com

    Thanks
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You will want to get rid of that table you are using for the menu altogether.

    Just cut it out of the html like so -
    (snip is just to show you where to start and end)

    Code:
    <snip>
    <h3>Main Menu</h3>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody><tr align="left"><td><a href="http://www.diasporamessenger.com/index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a>
    - 
    -
    -
    -
    -
    
    <tr align="left"><td><a href="http://www.diasporamessenger.com/index.php?option=com_content&amp;task=view&amp;id=267&amp;Itemid=359" class="mainlevel">HEADLINE NEWS APRIL 2010</a></td></tr>
    </tbody></table>
    </snip>
    Then you will want to use an unordered list <ul> in place of the old table menu and locate it under the header more than likely.

    To make the dropdown work you will want to use a Suckerfish Dropdown.

    Something like this would get you started.

    You will want to style it to suit your needs but you will need to get something started first and then post back if you run into any problems.

    Cheers

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that helps alot.
    I'll let you know if I get stuck.
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried installing this extended menu http://de.siteof.de/extended-menu.html but couldn't get it to work so used your drop down example http://www.css-lab.com/demos/navbar/sf-drpdwn.html by adding the css and js to index.php.

    Here's my rough trial: http://ihost-websites.com/DM/

    Question: How do I position my menu in the black background above it and remove the home link?

    Thanks for your time and expertise.
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, not quite sure if I understand...you are asking how to postiion the menu? Aka change the place it shows? On "#menu li" you can set margins (or just on #menu to move the entire thing)

    The home link can be removed by going in to the HTML and deleting it? . I must be missing something lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for checking...how do I remove the red line on the drop down?
    http://ihost-websites.com/DM/
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You have some problems with your base.css

    Ironically it has styles for #nav li in it also, they are conflicting with the #nav styles that my menu uses.

    You need to get all these styles cleaned out of your base.css first and then we can tweak the menu to your liking.


    base.css
    Code:
    #nav{margin-right: 8px;margin-top: 12px;position: absolute;right: 1em;z-index: 500;}
    #nav ul{list-style: none;margin: 0;padding: 0;}
    #nav a{float: none;}
    #nav li{float: left;height: 20px;margin-bottom: 0;margin-left: 4px;margin-right: 4px;margin-top: 0;padding-bottom: 0;padding-left: 5px;padding-right: 0;padding-top: 0;}
    #nav li a{color: #fff;display: block;float: left;font: bold 11px/20px Tahoma, Arial;height: 20px;padding-bottom: 0px;padding-left: 0px;padding-right: 5px;padding-top: 0px;text-decoration: none;}
    Then remove that div id #nav and ul from your html. It is located above the dropdown. (In red)

    Code:
    <div id="nav">
        <ul>
            <li><a href="http://ihost-websites.com/DM/index.php">Home</a></li>
            <li><a href="http://ihost-websites.com/DM/index.php?option=com_contact&amp;Itemid=3">Contact Us</a></li>
            <li><a href="http://ihost-websites.com/DM/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2">News</a></li>
            <li><a href="http://ihost-websites.com/DM/index.php?option=com_weblinks&amp;Itemid=23">Links</a></li>
        </ul>
    </div>
    
    <h1><a href="index.php" title="Diaspora Messenger">Diaspora Messenger</a></h1>
    </div>
    
    <div id="headerleader">
    <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Articles &raquo;</a>
                <ul>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three</a></li>
                    <li><a href="#">Link Four &raquo;</a>
                        <ul>
                            <li><a href="#">Link One</a></li>
                            <li><a href="#">Link Two</a></li>
                            <li><a href="#">Link Three</a></li>
                            <li><a href="#">Link Four</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link Five</a></li>
                </ul>
            </li>
            <li><a href="#">News</a></li>
            <li><a href="#">Gallery &raquo;</a>
                <ul>
                    <li><a href="#">Link One</a></li>
                    <li><a href="#">Link Two</a></li>
                    <li><a href="#">Link Three &raquo;</a>
                        <ul>
                            <li><a href="#">Link One</a></li>
                            <li><a href="#">Link Two</a></li>
                            <li><a href="#">Link Three</a></li>
                            <li><a href="#">Link Four</a></li>
                            <li><a href="#">Link Five</a></li>
                            <li><a href="#">Link Six</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Link Four</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">About</a></li>
        </ul>
    </div>

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm sorry there isn't a red line?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi v-2000,

    I have corrected the problems I mentioned above as well as some I did not mention yet.

    See if this is what you are wanting to do.
    http://www.css-lab.com/test/vision2000/index.html

    I have nested the menu in the #pathleft div, which is the div with the rounded black BG image.

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur...thanks very much for taking the time to correct my errors. It's looking good now.

    Then only problem now is I'll have to create new links manually instead of Joomla creating them automatically when a new page is added.
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur...how do I prevent the drop down from interfering with the banners on diasporamessenger.com/dev/ in Internet Explorer?

    In FF the drop down appears over the banners in IE it's underneath.

    Thank you
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    how do I prevent the drop down from interfering with the banners
    Hi,
    It is all explained in detail in this stickied thread & solution post.

    force flash to play below dhtml menu?

    [solution] Flash, Suckerfish, (d)html hidden, wmode opaque/transparent...

    You may also find This Thread helpful for you to rethink your decision of designing that site with all animated gifs and marquess.
    I'm afraid that very few people are going to take your site seriously.

    You need to refer back to post#7 also, you still have those leftover #nav li styles from your base.css conflicting with your new nav styles.

  13. #13
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your patience
    When I removed the code from base.css the navigation got messed up.
    Did I code the html incorrectly?

    Also I still don't understand what I need to add to the css for the drop down to show over the banners in IE.

    I agree with you it's a really ugly, slow loading site however the person who owns it prefers it that way even though I tried to convince him otherwise.

    Looking forward to your advice.
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting


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
  •