MiniDoc: Creating a CSS Drop-down Menu
-
- Joomla! Ace
- Posts: 1942
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Washington D.C. & Baltimore, MD Metro
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
If I remember correctly you need to give it a module or menu suffix of -nav
Thanks,
Roger Raymond
Techno Puzzle
Roger Raymond
Techno Puzzle
-
- Joomla! Fledgling
- Posts: 4
- Joined: Sat Jul 28, 2007 3:34 am
Re: MiniDoc: Creating a CSS Drop-down Menu
Changing the module and menu sufix from -suckerfish-horizontal to -nav doesn't seem to make a difference, one way or another. Still works in IE, but not in FF.
-
- Joomla! Intern
- Posts: 87
- Joined: Sun Feb 11, 2007 2:34 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Same here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Unbelivable.........but in FF it's just one big vertical list...........
I attach a screenshot....
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Intern
- Posts: 87
- Joined: Sun Feb 11, 2007 2:34 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Hi, i wrote the creator of the menu and the menu-templates.
he points me/us with the Problem to his FAQ-entry at: http://de.siteof.de/extended-menu-faq-v ... ontal.html
So its "only" a "width" problem. I'll try to look a bit at it tomorrow...
Regards, Christian
he points me/us with the Problem to his FAQ-entry at: http://de.siteof.de/extended-menu-faq-v ... ontal.html
So its "only" a "width" problem. I'll try to look a bit at it tomorrow...
Regards, Christian
-
- Joomla! Intern
- Posts: 87
- Joined: Sun Feb 11, 2007 2:34 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Yes i changed it and it works....
I changed the class
from width:auto; to a fixed width.
Sadly... i would like it more if there were a automatic-way of handling this.
Also i discovered a nother error - only in IE7, the expanding sublevel-entires appear a bit to much right - not direct under the mainlevel entires of the suckerfish-menu....
Regards, Christian
I changed the class
Code: Select all
ul.mainlevel-suckerfish-horizontal
Sadly... i would like it more if there were a automatic-way of handling this.
Also i discovered a nother error - only in IE7, the expanding sublevel-entires appear a bit to much right - not direct under the mainlevel entires of the suckerfish-menu....
Regards, Christian
- makamba
- Joomla! Explorer
- Posts: 290
- Joined: Tue Jan 16, 2007 10:31 am
- Location: The Netherlands
- Contact:
Me, strugling again
Hi all,
After my first website with Horizontal CSS Drop down menu (Extended Menu) I tried it again for my own website. I want my website to be a showcase of what I can. But although I have done it in the not so distant past, I can't get it to work.
What did I do up until now:
* Made the menu structure as I wanted it
* Uploaded the module mod_exmenu_1.0.3.zip
* In 'Modules -> Site Modules' I unpublished Top Menu
* I published Extended Menu, choose position 'User3' (where Top Menu resided)
* Entered for 'Menu Class Suffix' and 'Module Class Suffix' "mainnav"
* For 'Menu Name' I choose "topmenu"
* For 'Menu Style' I choose "Flat List"
* Set 'Expand Menu' to "Yes"
* Created an extra css file, called menu_css.css where I added the CSS code for Extended Menu
* Copied the IE specific code to index.php
* Added menu_css.css to my template_css.css, which is called from templateDetails.xml
* Added menu_css.css to templateDetails.xml
But the end result was that I now have a bulleted list instead of a nice folding out menu (see included image menu_as_it_is.jpg. The starting point of the menu, can be found in menu_as_starting_point.jpg the menu as it was in the original template). So what am I doing wrong, or did I forget?
Michel
After my first website with Horizontal CSS Drop down menu (Extended Menu) I tried it again for my own website. I want my website to be a showcase of what I can. But although I have done it in the not so distant past, I can't get it to work.
What did I do up until now:
* Made the menu structure as I wanted it
* Uploaded the module mod_exmenu_1.0.3.zip
* In 'Modules -> Site Modules' I unpublished Top Menu
* I published Extended Menu, choose position 'User3' (where Top Menu resided)
* Entered for 'Menu Class Suffix' and 'Module Class Suffix' "mainnav"
* For 'Menu Name' I choose "topmenu"
* For 'Menu Style' I choose "Flat List"
* Set 'Expand Menu' to "Yes"
* Created an extra css file, called menu_css.css where I added the CSS code for Extended Menu
* Copied the IE specific code to index.php
* Added menu_css.css to my template_css.css, which is called from templateDetails.xml
* Added menu_css.css to templateDetails.xml
But the end result was that I now have a bulleted list instead of a nice folding out menu (see included image menu_as_it_is.jpg. The starting point of the menu, can be found in menu_as_starting_point.jpg the menu as it was in the original template). So what am I doing wrong, or did I forget?
Michel
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Ace
- Posts: 1942
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Washington D.C. & Baltimore, MD Metro
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Did you set the list style to none in your CSS?
Code: Select all
list-style: none;
Thanks,
Roger Raymond
Techno Puzzle
Roger Raymond
Techno Puzzle
- makamba
- Joomla! Explorer
- Posts: 290
- Joined: Tue Jan 16, 2007 10:31 am
- Location: The Netherlands
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Yes. It is part of the code I copied from Compass.
Edit:
I included the code for menu_css.css
Edit:
I included the code for menu_css.css
Code: Select all
#mainlevelmainnav,#mainlevelmainnav ul{
float: left;
list-style: none;
etc.
}
You do not have the required permissions to view the files attached to this post.
Last edited by makamba on Fri Aug 03, 2007 8:12 am, edited 1 time in total.
- tbianco
- Joomla! Enthusiast
- Posts: 166
- Joined: Thu Jul 05, 2007 12:27 am
- Location: Tacoma, WA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
So I'm having the most frustrating time trying to figure out why my sub nav menu only works on the section/category/article page that the menu item belongs to. For example I have several sub links under services which belongs to a service section and category. When I'm a page that is not services related the subnavs do not render. Meaning they don't even show up in the HTML code.
I know I'm doing something wrong but I just don't know what I am doing wrong Joomla wise. I have build suckerfish menus from scratch hundreds of times but Joomla's set up is kicking my butt. Any suggestions?
I know I'm doing something wrong but I just don't know what I am doing wrong Joomla wise. I have build suckerfish menus from scratch hundreds of times but Joomla's set up is kicking my butt. Any suggestions?
marketing : branding : thinking
VeloceMedia.com
VeloceMedia.com
-
- Joomla! Ace
- Posts: 1942
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Washington D.C. & Baltimore, MD Metro
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Can you provide a link?
Thanks,
Roger Raymond
Techno Puzzle
Roger Raymond
Techno Puzzle
- tbianco
- Joomla! Enthusiast
- Posts: 166
- Joined: Thu Jul 05, 2007 12:27 am
- Location: Tacoma, WA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Unfortunately I'm developing from my localhost. Here's the output when I'm on my company page for the menu area, notices that there is no sub menu items in the services section. How I have things set up is that each main menu item link is a section blog layout and each sub menu item is a category blog layout. I'm new to Joomla so I'm not even sure if that's how I should be doing it. Also another thing to take notice in is that in my menu items it doesn't output the item1, item2, item3...classes.
Oh and I know this is the wrong forum area but, but I'm on Joomla 1.5
Oh and I know this is the wrong forum area but, but I'm on Joomla 1.5
Code: Select all
<ul>
<li>
<a href="index.php/main_page">
<span>main page/</span>
</a>
</li>
<li id="current" class="parent active">
<a href="index.php/company">
<span>company/</span>
</a>
<ul>
<li>
<a href="index.php/company/about_patron_saint_media">
<span>about us</span>
</a>
</li>
<li>
<a href="index.php/company/our_values">
<span>our values</span>
</a>
</li>
<li>
<a href="index.php/company/consultants">
<span>consultants</span>
</a>
</li>
<li>
<a href="index.php/company/what_to_expect">
<span>what to expect</span>
</a>
</li>
</ul>
</li>
<li class="parent">
<a href="index.php/solutions">
<span>solutions/</span>
</a>
</li>
<li>
<a href="index.php/jobs">
<span>jobs/</span>
</a>
</li>
<li>
<a href="index.php/contact">
<span>contact/</span>
</a>
</li>
</ul>
marketing : branding : thinking
VeloceMedia.com
VeloceMedia.com
-
- Joomla! Ace
- Posts: 1942
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Washington D.C. & Baltimore, MD Metro
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Have you tried using the Suckerfish and ExtMenu solution?
Thanks,
Roger Raymond
Techno Puzzle
Roger Raymond
Techno Puzzle
- tbianco
- Joomla! Enthusiast
- Posts: 166
- Joined: Thu Jul 05, 2007 12:27 am
- Location: Tacoma, WA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
no I don't need it cause I finally figured it out it's this one setting "Always show submenu items" that is in the module manager for the main menu that I was overlooking that allowed me to do what I needed. But yeah I was about ready to pull my hair out over that one.
marketing : branding : thinking
VeloceMedia.com
VeloceMedia.com
-
- Joomla! Fledgling
- Posts: 3
- Joined: Thu Sep 06, 2007 10:56 pm
Drop down menu instead of Submenu?
After exhaustedly researching this issue I haven't found any explanation for the problem I am having . Within my Main Menu I added 2 child links, one for Linux Today under News and one for Google under Links. In the left hand column under the Main Menu you can see the 2 sub-links and in the HTML it has them differentiated by adding the tag class="sublevel" to the a link. However it does not appear in the Extended Menu at all. Only if I go to the parent page. For example if I go to News then the Linux Today link appears in an added line below it as a submenu.
How do I get the child links to appear as a drop-down links when you hover over the parent instead of submenus? More specifically how do I get the child links to appear in the Extended Menu Tree? Even if I remove the suckerfish css the Extended Menu does not show all the same links as the Main Menu (i.e. it doesn't show the child links).
Here are some of my settings
I am experienced in HTML and CSS but pretty new to Joomla. I apologize if I am not using the correct terminology. The main thing is that I want drop down menus not submenus! I would really appreciate any help!
Here is the link to my site: http://www.wichitashome.com/index.php
How do I get the child links to appear as a drop-down links when you hover over the parent instead of submenus? More specifically how do I get the child links to appear in the Extended Menu Tree? Even if I remove the suckerfish css the Extended Menu does not show all the same links as the Main Menu (i.e. it doesn't show the child links).
Here are some of my settings
Do I need to do anything with "Parent Menu Item", "Begin With Current Item Level" or "Begin With Level"?Menu Class Suffix: mainnav
Module Class Suffix: mainnav
Menu Name: mainmenu
Source Type: menu
Menu Style: Tree List
Expand Menu: Yes
I am experienced in HTML and CSS but pretty new to Joomla. I apologize if I am not using the correct terminology. The main thing is that I want drop down menus not submenus! I would really appreciate any help!
Here is the link to my site: http://www.wichitashome.com/index.php
- tbianco
- Joomla! Enthusiast
- Posts: 166
- Joined: Thu Jul 05, 2007 12:27 am
- Location: Tacoma, WA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
First off, read the reply I made in the previous post that will help you with outputting the sub links.
Okay now that we have that out of the way, let me better see if I can clarify your question. More specifically what you are asking is "How do I get my sub menu links to show at all time so I can apply styles to them (in the case of the suckerfish CSS method) so that I can turn them into drop downs?"
Is that the correct question?
Okay now that we have that out of the way, let me better see if I can clarify your question. More specifically what you are asking is "How do I get my sub menu links to show at all time so I can apply styles to them (in the case of the suckerfish CSS method) so that I can turn them into drop downs?"
Is that the correct question?
marketing : branding : thinking
VeloceMedia.com
VeloceMedia.com
-
- Joomla! Fledgling
- Posts: 3
- Joined: Thu Sep 06, 2007 10:56 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
tbianco, thanks for the reply.
I can't find the option "Always show submenu items". I am using Joomla! 1.0.13 Stable, is that different from yours? I looked in both the main menu module and the Extended Menu module.
Yes I believe that you have my question right:
I can't find the option "Always show submenu items". I am using Joomla! 1.0.13 Stable, is that different from yours? I looked in both the main menu module and the Extended Menu module.
Yes I believe that you have my question right:
In other words the submenu items are not appearing in the of the Extended Menu list."How do I get my sub menu links to show at all time so I can apply styles to them (in the case of the suckerfish CSS method) so that I can turn them into drop downs?"
-
- Joomla! Fledgling
- Posts: 3
- Joined: Thu Sep 06, 2007 10:56 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I finally made a breakthrough!! I set "Split Menu" to 2 and that finally added the subpages to the tree list and now the drop downs are working (and there was much rejoicing!)... in Fire Fox that is, unfortunately it is not working in IE6 (blah!).
I realize there is a lot above here that talks about problems with Explorer, so now I will start trudging for that answer.
Think how much easier all of our lives would be if only we didn't have to worry about Explorer not getting along with everyone else and not following the standards of the rest of the world.
I realize there is a lot above here that talks about problems with Explorer, so now I will start trudging for that answer.
Think how much easier all of our lives would be if only we didn't have to worry about Explorer not getting along with everyone else and not following the standards of the rest of the world.
- tbm2020
- Joomla! Intern
- Posts: 66
- Joined: Wed Jun 21, 2006 7:53 am
- Location: UK
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Hey guys
I ve managed to build a drop down and get it working locally but then when its running online its the thing starts to misbehave and it actually becomes quite annoying.
Link Below
http://d495462.u41.ukisp.com/index.php
Basically view the page and rollover the services and facilty buttons. They both have drop down menus but the only work when your actually on that page, furthermore when you move from the parent to the submens it disappaears unless you move it quickly lol . Anyone help with this i think its javascript issue for first prob but a css issue for the second.
thats the css
and javascript
Any hlep much appreciated
I ve managed to build a drop down and get it working locally but then when its running online its the thing starts to misbehave and it actually becomes quite annoying.
Link Below
http://d495462.u41.ukisp.com/index.php
Basically view the page and rollover the services and facilty buttons. They both have drop down menus but the only work when your actually on that page, furthermore when you move from the parent to the submens it disappaears unless you move it quickly lol . Anyone help with this i think its javascript issue for first prob but a css issue for the second.
Code: Select all
/*Start of Menu .......................................................................................*/
#nav, #nav ul {
padding: 1px 0 0 0;
margin: 0;
height:24px;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 80px;/* C2 :Menu width change to suite size of text on the menu*/
}
#nav li a{
height:22px;
color:white;
text-decoration: none;
text-align: center;
width:85px; /*Match this preference to C2*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 80%;
text-transform: none;
letter-spacing: 0px;
word-spacing: 1px;
background-image: url(images/button.jpg);
}
#nav li a:hover{
text-decoration:none;
background-image: url(images/buttonhover.jpg);
}
#nav li ul li a{
background-color: #325f2f;
background-image: none;
width:180px;
text-align: left;
padding:0 0 0 4px;
}
#nav li ul li a:hover{
background-color: #A9C9AE;
background-image: none;
color: black;
}
/*puts the 1st level drop down out of view*/
#nav li ul {
position: absolute;
width: 85px;/*Match this preference to C2*/
left: -999em;
}
/*Brings the 1st level drop down into view and into position*/
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/*End of Menu .........................................................................................*/
and javascript
Code: Select all
<script type="text/javascript"><!--/-->![CDATA[//>!--
sfHover=function(){var sfEls=document.getElementById("nav").getElementsByTagName("LI");for(var i=0;i<sfEls.length;i++){sfEls[i].onmouseover=function(){this.className+=" sfhover";}
sfEls[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" sfhover\\b"),"");}}}
if(window.attachEvent)window.attachEvent("onload",sfHover);//-->!]]>
<!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();} MM_reloadPage(true);//-->
</script>
-
- Joomla! Apprentice
- Posts: 6
- Joined: Mon Sep 24, 2007 3:12 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Hi all,
I'm new to Joomla! Trying to create a simple site with drop-down menus. I don't see anything in my Joomla! menu manager about creating sub-menus.
How is this done?
I have several static content pages linking from the horizontal menu at the top. I now need to create sub-menus and sub-sub-menus that drop down from the top-most menu items. I've installed a template from Joomlashack.com.
thanks,
--JC
I'm new to Joomla! Trying to create a simple site with drop-down menus. I don't see anything in my Joomla! menu manager about creating sub-menus.
How is this done?
I have several static content pages linking from the horizontal menu at the top. I now need to create sub-menus and sub-sub-menus that drop down from the top-most menu items. I've installed a template from Joomlashack.com.
thanks,
--JC
-
- Joomla! Ace
- Posts: 1942
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Washington D.C. & Baltimore, MD Metro
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Menu's are primarily controlled by your template and it's CSS file(s). Check your css for the mainlevel / sublevel class. There are also extensions available that will create the menu's for you.
What template are you using?
What template are you using?
jclanin wrote: I'm new to Joomla! Trying to create a simple site with drop-down menus. I don't see anything in my Joomla! menu manager about creating sub-menus.
How is this done?
I have several static content pages linking from the horizontal menu at the top. I now need to create sub-menus and sub-sub-menus that drop down from the top-most menu items. I've installed a template from Joomlashack.com.
Thanks,
Roger Raymond
Techno Puzzle
Roger Raymond
Techno Puzzle