I have a project and I need a multi level menu which will be dynamic, but for now I want it hardcoded (html / jquery / javascript / anything that will work).
The first level will be some icons which will be place horizontally. And when I click on any icon the second level will appear, which will have a sub menu (child elements) and the third level will have some children elements too.
The structure will be like this:
Icon1
FirstMenu
SecondMenu
ThirdMenu
FirstMenu
SecondMenu
Icon2
FirstMenu
SecondMenu
ThirdMenu
FirstMenu
SecondMenu
Icon3
FirstMenu.
I was able to create a sublevel menu, but I can't figure it out how to put those icons in it, and on click to show me the children of it.
The menu should be like this. When I click on a icon, the right menu from the bottom should collapse. And when I click on HEAVY DUTY for example, a third level should appear.
Can you give me some hints or resources from where I can start ?
Thank you very much in advance!
Try this. you can add fontawesome for the icons. Js Fiddle p9Lea8g4/7/
Related
I am trying to get my mega menu on top of the carousel but it hides behind it. I don't know how to make it show on top.This is before adding carousel. This is after adding carousel from bootstrap. Mega Menu css. Mega menu Hover.
Please help.
I tried to see overflow and z-index and tried both of them. I don't know if i am doing it right or not. I want my mega menu to show up on top of the carousel.
A possible solution is to set the mega menu to position absolute, then set its z-index to +1. This will set the entire bar above out of the stack and move it above the carousel.
The other option is to move the mega menu data higher in the HTML page to give it higher priority. It would help to see the rest of the source code from the HTML index. Tell me how it goes!
My Problem is solved as i have given "z-index:5;" to all the "li" and "ul" element in the navbar. Now it is working.
I've been struggling with this for a couple of days now and can't think anymore.
I've created a template for a particular page for event menus and within that page I have a sub menu. This sub menu has event menus. For the purposes of example: Item 1, Item 2 and Item 3
These menu items are their own pages.
The submenu should open the pages in this template. Page layout example below:
Header
Main Nav
Banner Image
Content for Events
Event Menus (Item 1 | Item 2 | Item 3)
Menu Content
Footer
Menu Content switches out by clicking on the menu items, but the Content for Events stays static.
I currently have it working by adding a $_GET variable to the end of the links, but I've hard coded the menu. I don't want this because then the client can't make their own menu changes and edit their menus. (The amount of changes so far has been ridiculous.)
I've put the Event Menus and Menu Content into another nested loop, theoretically so it reacts inside the loop, though initial tests with this have failed.
I'd really like to keep the dynamic nature of Wordpress' menu system, but can't get this to work without hard coding.
At this point I'd be happy with direction on where to research.
Thanks.
If your HTML for the menu content is not too unwieldy, you could potentially drop each menu into a Wordpress Page, where the client could edit it. Simply create a Wordpress page for each menu, drop in your menu content, save it, and make a note of the Page's ID number.
Then, in your template, you can pull in the menu content by getting the Page with something like this:
<?php
// Menu One is content in Page ID # 14
$menu_one = get_post(14);
echo apply_filters('the_content', $menu_one->post_content);
?>
For your reference, get_post on Wordpress Codex: http://codex.wordpress.org/Function_Reference/get_post
On your actual page, what you could do instead of using a GET to grab each menu, is just go ahead and load all 3 menus on page load. Using CSS, you can hide the two you don't want at first and just show the default one. Then using some JavaScript events on the menu item links, you can show the clicked-on menu and hide the other two.
I've put a few notches in my oop and WP programming since asking this question. I think the better way to do this is a custom post type and change the wp_query object with parameters based on the link which can probably just be controlled by post ID. But it would still allow for a menu to be added to the "archive" page that controls the posts. Ultimately allowing client control of the menu, but still having a dynamic ability.
I am trying to create a horizontal menu, just like the one in my main menu position (in fact I want it to look identical). I have setup a menu module in the position I would like and added the class-suffix that applies to my main menu. The first 'level' of the menu displays correctly, however, the dropdown box submenu items are covered by the modules below so I cannot see or choose the items. I just want a menu that looks identical to my mainmenu in another position. Is there an easy way to do this? Do I need to change how the position 'styles' menus and if so, where do I do this (css files, php files)?
Thanks.
The problem sounds like you have a z-index issue with the modules below the menu. Depending on the position of the code and the CSS you will need to make some changes to put the menu module above the items that are covering the dropdown menu.
If you want a specific answer then you need to give us a link to the page.
I'd like to move the menu separator (look here) currently just after (to the right) of the menu item "Sometitle" to just before (to the left) it, making a separator just after the menu item "Donate" and just before the menu item "Sometitle". Is this accomplishable via the Joomla software,and if so how do I go about doing it, or do I have to accomplish this myself (via JavaScript/CSS). If it's only doable via JavaScript/CSS,any tips would be appreciated.
Thanks!
Is 'Some Title' a specific module or is part of the menu? I would make a second menu module for that item and instead of applying that margin you can put 'float:right' to the module div so you don't waste all that space.
Maybe you can make a 'dummy' menu item before 'Some Title'. Make it invisible with css so it shows only the separator. That's one option, I should take a look at the actual css code and html layout to give you more ideas. But definitely you can solve this with css.
Joomla way:
Create another menu for that item (and remove it from the left menu), use the same style for the <li> items in both menus (of course, place each <ul> according to your design).
CSS way:
Set the 'Sometitle' item like this (replace the X for the right item id):
.menuClass .itemX {background-position-x:0%;}
JS way:
Set the css properties as above.
I am trying to make a simple drop down menu system for my Joomla site. But Joomla menu is completely confusing me. How does a joomla menu work?
For eg: In the image below the whole blue bar is a menu? or each item like 'Projects' is a menu?
Now I can make two pages for Project 1 & Project 2 but where will the 'Projects' link point to? If it does point somewhere then incase of no JavaScript I'd like to point it to a page that shows a list of the menu items.
How do I place my menu at this place in my template?
Why is there a default MainMenu and why do I need to use a menu to show the main content on my site. Shouldn't menus be used for making menus. And I only needed a menu item to show my content not that whole Main Menu. The main confusion is the Main Menu.
I don't wanna use a module coz I couldn't find a good one for 1.7 that uses jQuery (All JavaScript on my site is done with jQuery) and I read somewhere it can be made within the template.
All I want is to somehow place menu items lists inside the respective anchors up top so I can just show/hide them as dropdowns with jQuery.
I hope I haven't made the question confusing pointing to what I need to make. It's just that I'm super confused myself.
Please help.
I appreciate the help.
Thanks Alot.
Joomla menus are generated thru modules. In most cases mod_mainmenu. Theese modules you place in module positions. If your menue should be horizontal on top, then you put your mod_mainmenu module in the position "top". Be aware that every template uses different position names.