Replace side menu with horizontal drop down in Joomla template?

HTML & CSS
1

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

Thanks

2

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)

[COLOR=Red]<snip>[/COLOR]
[B]<h3>Main Menu</h3>[/B]
<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>
[COLOR=Red]</snip>[/COLOR]

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 :slight_smile:

3

Thanks that helps alot.
I’ll let you know if I get stuck.

4

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.

5

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) :slight_smile:

The home link can be removed by going in to the HTML and deleting it? :). I must be missing something lol

6

Thanks for checking…how do I remove the red line on the drop down?
http://ihost-websites.com/DM/

7

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

[COLOR=Red]#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;}[/COLOR]

Then remove that div id #nav and ul from your html. It is located above the dropdown. (In red)

[COLOR=Red][B]<div id="nav">[/B]
    <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>
[B]</div>[/B][/COLOR]

<h1><a href="index.php" title="Diaspora Messenger">Diaspora Messenger</a></h1>
</div>

<div id="headerleader">
[COLOR=Blue][B]<ul id="nav">[/B][/COLOR]
        <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

Hi, I’m sorry there isn’t a red line?

9

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

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.

11

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

12

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

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.