MiniDoc: Creating a CSS Drop-down Menu

Discuss the FAQ's here, and get in touch with the FAQ Team.
technopuzzle
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby technopuzzle » Sat Jul 28, 2007 5:40 am

If I remember correctly you need to give it a module or menu suffix of -nav
Thanks,
Roger Raymond
Techno Puzzle

tjmoyer
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Jul 28, 2007 3:34 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tjmoyer » Sat Jul 28, 2007 5:48 am

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.

g-c
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sun Feb 11, 2007 2:34 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby g-c » Sat Jul 28, 2007 9:50 am

....but in FF it's just one big vertical list...........

Same here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Unbelivable.....
I attach a screenshot....
You do not have the required permissions to view the files attached to this post.

g-c
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sun Feb 11, 2007 2:34 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby g-c » Sun Jul 29, 2007 8:56 pm

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

g-c
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sun Feb 11, 2007 2:34 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby g-c » Mon Jul 30, 2007 11:16 am

Yes i changed it and it works....
I changed the class

Code: Select all

ul.mainlevel-suckerfish-horizontal

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

User avatar
makamba
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Tue Jan 16, 2007 10:31 am
Location: The Netherlands
Contact:

Me, strugling again

Postby makamba » Fri Aug 03, 2007 6:27 am

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
You do not have the required permissions to view the files attached to this post.

technopuzzle
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby technopuzzle » Fri Aug 03, 2007 6:37 am

Did you set the list style to none in your CSS?

Code: Select all

   list-style: none;
Thanks,
Roger Raymond
Techno Puzzle

User avatar
makamba
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Tue Jan 16, 2007 10:31 am
Location: The Netherlands
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby makamba » Fri Aug 03, 2007 7:02 am

Yes. It is part of the code I copied from Compass.

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.

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tbianco » Sat Aug 25, 2007 6:18 am

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?
marketing : branding : thinking
VeloceMedia.com

technopuzzle
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby technopuzzle » Sat Aug 25, 2007 6:26 am

Can you provide a link?
Thanks,
Roger Raymond
Techno Puzzle

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tbianco » Sat Aug 25, 2007 4:37 pm

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

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

technopuzzle
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby technopuzzle » Sat Aug 25, 2007 8:25 pm

Have you tried using the Suckerfish and ExtMenu solution?
Thanks,
Roger Raymond
Techno Puzzle

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tbianco » Sun Aug 26, 2007 2:41 am

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

nattyman
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Sep 06, 2007 10:56 pm

Drop down menu instead of Submenu?

Postby nattyman » Fri Sep 07, 2007 5:53 pm

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

Menu Class Suffix: mainnav
Module Class Suffix: mainnav

Menu Name: mainmenu
Source Type: menu

Menu Style: Tree List
Expand Menu: Yes


Do I need to do anything with "Parent Menu Item", "Begin With Current Item Level" or "Begin With Level"?

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

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tbianco » Sat Sep 08, 2007 1:39 am

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?
marketing : branding : thinking
VeloceMedia.com

nattyman
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Sep 06, 2007 10:56 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby nattyman » Sat Sep 08, 2007 4:13 am

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:
"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?"


In other words the submenu items are not appearing in the
    of the Extended Menu list.

nattyman
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Sep 06, 2007 10:56 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby nattyman » Sat Sep 08, 2007 3:30 pm

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.

User avatar
tbm2020
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Wed Jun 21, 2006 7:53 am
Location: UK
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby tbm2020 » Sat Sep 22, 2007 8:19 pm

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.

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 .........................................................................................*/
thats the css

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>


Any hlep much appreciated

jclanin
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Sep 24, 2007 3:12 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby jclanin » Mon Sep 24, 2007 7:47 pm

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

technopuzzle
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby technopuzzle » Mon Sep 24, 2007 8:07 pm

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?

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


Return to “FAQ Discussion Board”

Who is online

Users browsing this forum: No registered users and 1 guest