- Posts: 7
- Thank you received: 0
Top Menu Drop-Down
-
oftheunknown
Inactive member - Topic Author
- New Member
Less
More
13 years 5 months ago - 4 years 3 months ago #9524
by oftheunknown
Top Menu Drop-Down was created by oftheunknown
Is it possible to change the top menu to a drop-down style similar to this screenshot? If so, how can I do this?
Last edit: 4 years 3 months ago by milos.
Please Log in to join the conversation.
-
ivan.milic
Support Staff - Moderator
Less
More
- Posts: 14116
- Thank you received: 1639
13 years 5 months ago #9530
by ivan.milic
Replied by ivan.milic on topic Re: Top Menu Drop-Down
Yes , all joomla menus (generally) use some script or css to make manu of what menu module makes.
In that template you have Menu Tag ID set to "nav" to distinguish that menu for styling and scripting.
If you open index.php of template you can find this:
That is script that makes default menu. Style for it you can recognize by #nav in css path.
So you need to replace that script with script for menu you want, andd add styles for your new menu in template_css.css.
Also you may need to use other Menu tag ID or class suffix, to apply style for your menu.
In that template you have Menu Tag ID set to "nav" to distinguish that menu for styling and scripting.
If you open index.php of template you can find this:
Code:
<script type="text/javascript">
function mainmenu(){
jQuery("#nav ul").css({display: "none"}); // Opera Fix
jQuery('#nav > li.active').prev().css('border-right', 'none'); // removing border from the previous button of the active button
jQuery("#nav li ul li#current").parent().css({ visibility: "visible" }).show(); // if active link is in sublevel, make this submenu visible
jQuery("#nav li#current ul > li").parent().css({ visibility: "visible" }).show();
jQuery("#nav > li").hover(function() {
jQuery("#nav li ul li#current").parent().css({ visibility: "hidden" }).hide();
jQuery("#nav li#current ul > li").parent().css({ visibility: "hidden" }).hide();
jQuery(this).find('ul:first').css({ visibility: "visible",display: "none" }).show();
},function(){
jQuery(this).find('ul:first').css({ visibility: "hidden" });
jQuery("#nav li ul li#current").parent().css({ visibility: "visible" }).show();
jQuery("#nav li#current ul > li").parent().css({ visibility: "visible" }).show();
});
}
jQuery(document).ready(function(){ mainmenu();});
function mainmenu2(){
jQuery(" #nav2 li ").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible"});
},function(){jQuery(this).find('ul:first').css({visibility: "hidden"}); });}
jQuery(document).ready(function(){ mainmenu2();});
</script>
That is script that makes default menu. Style for it you can recognize by #nav in css path.
So you need to replace that script with script for menu you want, andd add styles for your new menu in template_css.css.
Also you may need to use other Menu tag ID or class suffix, to apply style for your menu.
Please Log in to join the conversation.
Time to create page: 0.151 seconds