The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 12 posts ] 
Author Message
PostPosted: Fri Feb 18, 2011 12:57 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Sep 21, 2010 12:08 pm
Posts: 35
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


Top
 Profile  
 
PostPosted: Wed Feb 23, 2011 12:04 pm 
Joomla! Intern
Joomla! Intern

Joined: Fri Jan 14, 2011 8:56 am
Posts: 85
Location: Nairobi Kenya
You can us jQuery to create a nice slide menu

Add the following CSS

Code:
.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:
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.#


Top
 Profile  
 
PostPosted: Wed Feb 23, 2011 12:24 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Sep 21, 2010 12:08 pm
Posts: 35
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!


Top
 Profile  
 
PostPosted: Wed Mar 02, 2011 2:05 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Mar 02, 2011 1:24 am
Posts: 1
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?


Top
 Profile  
 
PostPosted: Tue Mar 08, 2011 4:47 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Jan 25, 2011 9:38 pm
Posts: 3
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:
</body>
tag. The syntax should be
Code:
  <script>
 your code goes here.
 
  </script>
be


Top
 Profile  
 
PostPosted: Sun Mar 20, 2011 5:51 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Jul 06, 2009 8:45 pm
Posts: 32
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:
</body>
tag. The syntax should be
Code:
  <script>
 your code goes here.
 
  </script>
be


Top
 Profile  
 
PostPosted: Fri Apr 01, 2011 1:27 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Feb 03, 2009 12:26 pm
Posts: 19
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.


Top
 Profile  
 
PostPosted: Sun May 08, 2011 12:05 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Apr 19, 2011 11:49 pm
Posts: 12
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.


Top
 Profile  
 
PostPosted: Sun May 08, 2011 1:08 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Feb 03, 2009 12:26 pm
Posts: 19
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.


Top
 Profile  
 
PostPosted: Sun May 08, 2011 1:11 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Feb 03, 2009 12:26 pm
Posts: 19
Or this.
IceMegaMenu
http://demo.icetheme.com/extensions16/icemegamenu


Top
 Profile  
 
PostPosted: Wed May 11, 2011 10:02 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Feb 03, 2009 12:26 pm
Posts: 19
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 ;)


Top
 Profile  
 
PostPosted: Fri Jun 10, 2011 8:40 am 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu May 20, 2010 7:33 am
Posts: 177
Location: South Shields, UK
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 12 posts ] 



Who is online

Users browsing this forum: No registered users and 29 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group