Dropdown Menu in Beez Template with Joomla 1.6

General questions relating to Joomla! 2.5. Note: All 1.6 and 1.7 releases have reached end of life and should be updated to 2.5. There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
daraclare
Joomla! Apprentice
Joomla! Apprentice
Posts: 35
Joined: Tue Sep 21, 2010 12:08 pm

Dropdown Menu in Beez Template with Joomla 1.6

Postby daraclare » Fri Feb 18, 2011 12:57 pm

Hi,

Can anyone advise me how I get a dropdown menu on main main menu with the beez5 template? I'd rather edit CSS or HTML if possible than install another module or component.

You can see my problem if you go to www.daragraphicdesigns.com and click on "Krafter" on the top menu - my submenu is off to the right and I can't properly click on the original top menu.

Any help much appreicated!

Thanks in advance!

DC

evansmwendwa
Joomla! Intern
Joomla! Intern
Posts: 85
Joined: Fri Jan 14, 2011 8:56 am
Location: Nairobi Kenya
Contact:

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby evansmwendwa » Wed Feb 23, 2011 12:04 pm

You can us jQuery to create a nice slide menu

Add the following CSS

Code: Select all

.clear {clear:both}
/* remove the list style */
ul.menu {
    margin:0;
    padding:0;
    list-style:none;

     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    ul.menu  li {
        float:left;
        display:block;
        width:100px;
        background:#ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
    }
         
    /* this is the parent menu */
   ul.menu  li a {
        display:block;
        padding:8px 5px 0 5px;
        font-weight:700;
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
    }
 
    ul.menu  li a:hover {
        color:#fff;
    }
     
    /* you can make a different style for default selected value */
    ul.menu li.active a {
        color: #C30;
    }
     
        /* submenu, it's hidden by default */
        ul.menu li  ul {
         background:#ccc;
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            list-style:none;
        }
         
        ul.menu li  ul li {
            width:140px;
            float:left;
            border-top:1px solid #fff;
        }
         
        /* display block will make the link fill the whole area of LI */
        ul.menu li  ul li a {
            display:block;
            height:15px;
            padding: 8px 5px;
            color:#333;
         text-align:left;
         font-weight:500px;
        }
         
        ul.menu li ul li a:hover {
            text-decoration:underline;
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html  ul.menu {
    margin:0 0 0 -2px;
}


and jquery Code

Code: Select all

jQuery(document).ready(function () {
     
    jQuery('.user3 li').hover(
        function () {
            //show its submenu
            jQuery('ul', this).slideDown(120);
 
        },
        function () {
            //hide its submenu
            jQuery('ul', this).slideUp(120);       
        }
    );
     
});

Ensure your template links to jquery somewhere above the javascript code
The speed of two moving Objects increases as they converge towards each other.
http://www.authenticvisualsmedia.com
#.If I failed, I tried.#

daraclare
Joomla! Apprentice
Joomla! Apprentice
Posts: 35
Joined: Tue Sep 21, 2010 12:08 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby daraclare » Wed Feb 23, 2011 12:24 pm

Thanks for this but I just want a simple dropdown menu not a slide menu with jquery. At the moment it looks like its a fault in the template as the sub-menu goes off to the left.

Thanks again for your help, I hope I don't sound ungrateful - I'm not!

eschminke
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Mar 02, 2011 1:24 am

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby eschminke » Wed Mar 02, 2011 2:05 am

This is great stuff. I'm having the same issue, and I'm a total noob about where to place things. I've got the css part kind of working (it needs some tweaking), but where do I put the jquery code? in it's own file? if so, what kind of file is it? a .js? if it's a .js where exactly does it need to be placed in order for it to work?

davidanberlin
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Tue Jan 25, 2011 9:38 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby davidanberlin » Tue Mar 08, 2011 4:47 am

eschminke wrote:This is great stuff. I'm having the same issue, and I'm a total noob about where to place things. I've got the css part kind of working (it needs some tweaking), but where do I put the jquery code? in it's own file? if so, what kind of file is it? a .js? if it's a .js where exactly does it need to be placed in order for it to work?


You can place the code at the bottom. Just before the

Code: Select all

</body>
tag. The syntax should be

Code: Select all

  <script>
 your code goes here.
 
  </script>
be

sraj49
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Mon Jul 06, 2009 8:45 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby sraj49 » Sun Mar 20, 2011 5:51 pm

davidanberlin wrote:
eschminke wrote:This is great stuff. I'm having the same issue, and I'm a total noob about where to place things. I've got the css part kind of working (it needs some tweaking), but where do I put the jquery code? in it's own file? if so, what kind of file is it? a .js? if it's a .js where exactly does it need to be placed in order for it to work?


You can place the code at the bottom. Just before the

Code: Select all

</body>
tag. The syntax should be

Code: Select all

  <script>
 your code goes here.
 
  </script>
be

Brick1881
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Tue Feb 03, 2009 12:26 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby Brick1881 » Fri Apr 01, 2011 1:27 pm

Ok, Sorry for asking this, I am totaly unfamiliar with this:
1. Do I put the JQuery code in the index.php ?
2. Is it relevant in which template CSS-file i put the CSS ? Do I just paste it anywhere?
3. How do I link to JQuery? I was thinking of using one of the CDN Hosted JQuery.

A number of large enterprises provide hosted copies of jQuery on existing CDN networks that are available for public use. Below are links to the CDN-hosted copies of jQuery that you may hotlink to.

Google Ajax API CDN
http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js
Google Ajax CDN Documentation
Microsoft CDN
http://ajax.aspnetcdn.com/ajax/jQuery/j ... 5.2.min.js
Ajax CDN Announcement, Microsoft Ajax CDN Documentation
jQuery CDN (via Media Temple)
http://code.jquery.com/jquery-1.5.2.min.js Minified version
http://code.jquery.com/jquery-1.5.2.js Source version


Thank you for the code. Hope I get it working, because the top menu that came with beez5 didn't work.

ropertd
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Tue Apr 19, 2011 11:49 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby ropertd » Sun May 08, 2011 12:05 pm

I using Breez_20 in Joomla 1.6. I too want to create drop down menus leaving the menu as is but having the submenu hidden until you mouse over so that the submenu drops down not over. I don't know how to write HTML language and can't find a plugin that uses the breez menu without adding it's own design. One drop the sub menu down and to the right where it is cut off.
I'd like the submenu drop down pushing the ones below downward so you can still see it.

Brick1881
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Tue Feb 03, 2009 12:26 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby Brick1881 » Sun May 08, 2011 1:08 pm

Hi ropertd

I'd use something like MaxiMenuCK module if I were you. This has a lot of features and is easy to set up.
Here is the url to MaxiMenu in Joomla Extension directory:
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578?qh=YToxOntpOjA7czoyOiJjayI7fQ%3D%3D

And here is the webpage and DEMO.
http://www.joomlack.fr/en/Joomla-extensions/Menu/maxi-menu-ck-menu-dropdown-advanced.html

I think the demo suck, but you will get the idea of what it can do.

I used this on my page earlier, before i switched to JA Purity ii template which has almost the same menu integrated as standard.

Brick1881
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Tue Feb 03, 2009 12:26 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby Brick1881 » Sun May 08, 2011 1:11 pm


Brick1881
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Tue Feb 03, 2009 12:26 pm

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby Brick1881 » Wed May 11, 2011 10:02 pm

Here is the link to IceMegaMenu in the Extensions directory.
http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/16468

To the person sending me a private message:
Click the download button. You need to register to download the extension, but registration is free.
I won't send you the zipped file as they say you need to register. If you for some reason don't want to register, you can contact them directly at:
http://www.icetheme.com/About/Contact.html

Hope this helps ;)

User avatar
Kev261266
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 177
Joined: Thu May 20, 2010 7:33 am
Location: South Shields, UK

Re: Dropdown Menu in Beez Template with Joomla 1.6

Postby Kev261266 » Fri Jun 10, 2011 8:40 am

Hi,

I had the exact same query, so the info in this thread was invaluable. I had expected to be hunting around for info and messing with code and the scary Jquery for a good few days.

After reading this I installed the MaxiMenuCK module, and my menu was looking almost spot on, in less than 5 mins.

Some slight tweaking of the parameters should have it to 100% of what I am looking for.

I love threads like this. ;D

Cheers.

Kev.


Return to “General Questions/New to Joomla! 2.5”

Who is online

Users browsing this forum: ichiro [Crawler] and 7 guests