Make Existing Menu Responsive or Fluid

User avatar
Timespider
Posts: 37
Joined: 2010-02-16 22:15
Location: Auckland - New Zealand

Make Existing Menu Responsive or Fluid

Post by Timespider » 2015-08-07 06:40

I'm trying to make my horizontal menu responsive so it collapses up on itself if you shrink the browser or fits on a smaller screen with an @media query in CSS. I have mucked around for days & can't figure it out i'm using metal_simple which uses horizontal.css. Can anyone help.

Thanks Chris
Motto: STUPID HURTS

User avatar
Fred
Site Admin
Posts: 491
Joined: 2010-02-15 12:10
Location: Armagh, Northern Ireland
Contact:

Re: Make Existing Menu Responsive or Fluid

Post by Fred » 2015-08-11 23:27

Hi Chris,
I have switched from the interakt menus and using superfish
http://users.tpg.com.au/j_birch/plugins/superfish/

Here is a demo onhow to make it responsive
http://codepen.io/Imperative/pen/qaskf

Haven't had time to try the responsive bit yet.

User avatar
Timespider
Posts: 37
Joined: 2010-02-16 22:15
Location: Auckland - New Zealand

Re: Make Existing Menu Responsive or Fluid

Post by Timespider » 2015-08-12 00:01

Hi Fred, does superfish suport php or mysql for dynamic menus?

Cheers Chris
Motto: STUPID HURTS

User avatar
Fred
Site Admin
Posts: 491
Joined: 2010-02-15 12:10
Location: Armagh, Northern Ireland
Contact:

Re: Make Existing Menu Responsive or Fluid

Post by Fred » 2015-08-12 09:47

Chris,
Superfish is basically just a styled list.
So all you need to make it a dynamic database driven menu is a bit of code.

That is not as simple as it might sound if you have multiple level of menus with submenus.
You could easily run into recursion problems and nested mysql queries trying to find the child menus and more deeper levels.

I found a script done by someone called "J. Bruni" and modified it a bit to make it work with superfish.
Nice thing is it only uses one mysql query and no recursion at all.

As it stands now my menu cater for unlimited number of levels, Multiple access levels and time/date -sensitive menu options.

check your email...

Post Reply