JQuery Slicknav, merge two menus in one, but on 2 columns - javascript

on a wordpress custom theme, I'm using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it's simple and easy, but I'd like to separate the menus in two floating columns, left category and right the global menu.
see image:
I currently can insert a "<hr>" between one menu and the other, using combinedMenu.append("<hr>");, but if I "append" to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is
<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>
so it closes the tag itself! GRRRRR
can anyone helps me?
bye, L.

Related

Responsive Multi level drop down menu

I am trying to create a multi-level responsive drop down menu.
This link opens a pdf that holds the pictorial description that I am trying to code
page1 in pdf - depicts multi level view
page2 in pdf depicts the first level of drop downs. A B and C are drop down menus
page3 in pdf depicts the complete view when drop-down C and all its children drop-down menus are clicked till the end of hierarchy i.e., till level4
Each level - 1, 2, 3 and 4 have to be aligned horizontally center and vertically middle. The entire design needs to be responsive.
At each level, on clicking a drop-down list item, the next level has to be shown.
Any level should disappear or collapse on mouse-out.
I tried various approaches, using the bootstrap framework. Each of the approaches ended up with some limitations. Tried lots of debugging, taking clues from google search and forums. All went in vain.
Can some one suggest what could be the best approach?
Can this be achieved with a combination of html5, css3, jquery and bootstrap framework alone?
Does this bring in a need of any other technology to be deployed?

Bootstrap menu dropdown problems

my problem is with a bootstrap menu. I'm using wp_bootstrap_navwalker in my WP theme, and I found some solutions on the web to enable more deeper nav, but I can't find the solution to make it work fine on desktop and on smaller devices.
I have this structure of the menu:
My question is: How to enable all menu items, dropdown items and sub dropdown items to be clickable on all devices (on hover on desktop and on click on small devices). I suppose that on small devices there should be some function that lets you to click 2 time to access the link and on 1 click just to enable opening of the sub items.
I currently have this solution, but doesnt quite do what I want, as my sub dropdown items show up at the same time like this:
This is the exact code (JSFiddle) that I use in header.php and my style.scss.
Any ideas?

Last Resort - jQuery Mashable Mega Menu

I have been searching for an example of how to build a mega menu like what Mashable has, but without using PHP or MySQL and I'm having a heck of time.
If anyone know, that would be great... I'm just at my wits end and my eyes are now turning square from scouring the interwebs.
I've seen several example of how to create a jQuery dropdown mega menu, where, on hover, the menu drops down the full width of the menu, and displays more options. But I'm looking for the exact effect Mashable has, where you drop down and there is an unordered list to the left. You hover over any of those, and it reveals a sub list in the remaining area of the dropdown.
Al the example I have seen rely heavily on pulling an external php page to load in new options, but I just need it to display a sub unordered list, and not load in anything dynamically.
You can see what I'm talking about with the following link: http://mashable.com/
Can anyone help? or at least point me in the right direction?
If you dont need any dynamic loading whats keeping you from doing it in plain HTML and CSS? You can do the transitions in CSS3 as well.

SharePoint 2010 top Navigation?

I have styles with CSS the ootb (out of the box) top navigation in Shrepoint 2010. However I also want to add icons (.png images) for ech navigation manu itme. So for exapmple for Home I will like to an icon next to it, for About Us again another icon next to it and so on for Practices, Sectors, Our Events, Our People, Publications and Working for Us.
SharePoint 2010 basically builds the top navigation by using asp controls. I can see the in firebug(Firefox) and developer tools (IE) the HTML for the top navigation hwoever on the master page this is not visible.
What is th best way include icons in the top navigation items?
Thank in advance
You need to build your own asp.net control if you are going to customise this part of the menu I'm afraid. OOTB you can only alter the CSS and (limitedly) control what is shown. You can use the same DataSource if you wish for the SharePoint UI to remain in control.
I had the same problem with a site I am working on. I wanted to add individual icons to each main menu item but had no way to target them.
To get around this without creating a custom control I used jQuery to add a class that increments based on the number of menu items and then used this class to apply styles in my CSS.
$("a.menu-item").each(function(i) {
$(this).addClass("nav-" + (i+1));
});
Hope this helps you out!

Menu: What kind is this?

I dont know what it is called but you can see on this page http://carleypelletier.deviantart.com/gallery/#_browse if you click on a category you'll get a list and if there is a subcategory there will be a > at the end. When clicking this the menu text moves left off the menu and the new categories are in. How do i do this type of menu? i'm open to any libs. It would be nice if i can fill it using json or a config file.
Check this Chinese menu of jQuery drop downs, you are looking for a "drill down style of menu, on the menu you will see a "jQuery iPod-style Drilldown Menu" which is pretty close to what you want, they just used multiple ones.
A working example of one is here

Categories

Resources