Last Resort - jQuery Mashable Mega Menu - javascript

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.

Related

Overlapping elements in both directions

Guys I'm trying to recreate this site, just for a learning purpose,
and in the News section of the home page, there's this card with
a hover effect. Is it possible to pull out that just with css ?
I always end up with that slide out half behind the next card.
Different z-index on each card would work, it's just that last one
is sliding out in the 'wrong' direction.
Here's the sites link https://altar.io/
the website you're trying to re-create uses wow.js which generates animations with JS and CSS.
you can get it from here:
https://wowjs.uk/docs
you can check the library by just looking at the DIV element of each card. they contain a data attribute like data-wow-duration which is a wowjs library codes

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

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.

Responsive menu with a dropdown as last Item

I want to create a menu with some items, and at the end of this menu, it has a "Show More" dropdown. This "Show More" shows the rest of the items of menu, that could not be viewed because of the width of the browser. A classic responsive problem.
To illustrate:
And when the width is less than the image before, it happens:
So, my question is, what's the best way to do that? Is there any ready solution?
I am using Foundation, so I can't use any of another CSS module like Bootstrap. But, I can use jQuery, CSS3, HTML5. I don't have more limits than that - I guess =)
I got those images from Instantcart website, so, you can go there to see it working.

Mega menu implementation with wordpress

I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.

vertically scrolling html list

I have a long HTML list of say, 30 items. I would like to display this list in a vertical space that is only tall enough to accommodate about 5 of them. The list should automatically scroll vertically through the items (like a news ticker), but there are button to pause the scrolling and move to the next or previous items in the list. When the scrolling has reached the end of the list, it should restart at the beginning.
I'm looking for a jQuery plugin recommendation that can provide this functionality. I have a couple of other requirements, which are not absolutely necessary, but very desirable:
can accommodate list items of different heights
does not depend on jQuery-UI
The entire list will be loaded when the page is displayed, so I don't need to be able to load the list items via AJAX.
Have you seen this:
http://buildinternet.com/2011/02/totem-a-vertical-ticker-jquery-plugin/
I used it recently and it worked great. Seems to meet your requirements.
try this, it's a simplest solution without using additional jQuery plugin: http://jsfiddle.net/shershen08/5q3Bv/4/

Categories

Resources