Dropdown Menu in Beez Template with Joomla 1.6
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.
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.
-
- Joomla! Apprentice
- Posts: 35
- Joined: Tue Sep 21, 2010 12:08 pm
Dropdown Menu in Beez Template with Joomla 1.6
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
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
-
- 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
You can us jQuery to create a nice slide menu
Add the following CSS
and jquery Code
Ensure your template links to jquery somewhere above the javascript code
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);
}
);
});
The speed of two moving Objects increases as they converge towards each other.
http://www.authenticvisualsmedia.com
#.If I failed, I tried.#
http://www.authenticvisualsmedia.com
#.If I failed, I tried.#
-
- Joomla! Apprentice
- Posts: 35
- Joined: Tue Sep 21, 2010 12:08 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
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!
Thanks again for your help, I hope I don't sound ungrateful - I'm not!
-
- Joomla! Fledgling
- Posts: 1
- Joined: Wed Mar 02, 2011 1:24 am
Re: Dropdown Menu in Beez Template with Joomla 1.6
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?
-
- Joomla! Fledgling
- Posts: 3
- Joined: Tue Jan 25, 2011 9:38 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
You can place the code at the bottom. Just before theeschminke 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?
Code: Select all
</body>
Code: Select all
<script>
your code goes here.
</script>
-
- Joomla! Apprentice
- Posts: 32
- Joined: Mon Jul 06, 2009 8:45 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
davidanberlin wrote:You can place the code at the bottom. Just before theeschminke 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?tag. The syntax should beCode: Select all
</body>
beCode: Select all
<script> your code goes here. </script>
-
- Joomla! Apprentice
- Posts: 19
- Joined: Tue Feb 03, 2009 12:26 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
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.
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.
-
- Joomla! Apprentice
- Posts: 12
- Joined: Tue Apr 19, 2011 11:49 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
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.
I'd like the submenu drop down pushing the ones below downward so you can still see it.
-
- Joomla! Apprentice
- Posts: 19
- Joined: Tue Feb 03, 2009 12:26 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
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 ... I7fQ%3D%3D
And here is the webpage and DEMO.
http://www.joomlack.fr/en/Joomla-extens ... anced.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.
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 ... I7fQ%3D%3D
And here is the webpage and DEMO.
http://www.joomlack.fr/en/Joomla-extens ... anced.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.
-
- Joomla! Apprentice
- Posts: 19
- Joined: Tue Feb 03, 2009 12:26 pm
-
- Joomla! Apprentice
- Posts: 19
- Joined: Tue Feb 03, 2009 12:26 pm
Re: Dropdown Menu in Beez Template with Joomla 1.6
Here is the link to IceMegaMenu in the Extensions directory.
http://extensions.joomla.org/extensions ... enus/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
http://extensions.joomla.org/extensions ... enus/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
- Kev261266
- 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
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.
Cheers.
Kev.
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.
Cheers.
Kev.