ko2 menu website project

[Danny D]

Alex made a suggestion for a website that functions like the ko2 menu. Following on my Alex's brilliant idea I'd decided to create a mini project for myself to do just that. I'll blog about it here as I progress.

[Danny D]

My initial thoughts.

- Mobile first. The menu system must display on mobile devices. The entire menu can't fit horizontally on an iPhone for example however it will still need to be displayed effectively.
- Responsive design. Time to start learning more as my knowledge on this topic is basic.

[durban]

Reckon the css would be quite easy to do?

You would need indentation on fullscreen and single column on mobile or just switch the options to a singl menu

[Danny D]

Thank you for your response Sir.
I'm a n00b at css and responsive design so this project will be a learning experience. As you mentioned , mobile has to be single column, desktop will be full experience.

[durban]

So all this time you are telling me we need to get the KOA more responsive and you didn't actually know how to do it?!

Mate I thought you knew so I stepped up to impress you

But yes Creaating CSS for this would probably be simple, you would probably need to create 12 columns by 4 or something and then each menu would be 2 columns wide starting in COL1 for the top line, then starting in col 2 for second.

I have a few sites that are setup at 12 wide.

then you just throw it to be 2 cols wide on mobile and where there is nothing in a box you ignore it and should get a straight set of menu items...

Either that or as on dbnx.com you can make it have a menu on the top bar that slides in the menu on mobile...that works ok I think?

Mark

[durban]

Danny if you are having a go yourself then don't click on the link.

But for anyone interested -

www.ko-gathering.com/komenu

[durban]

Shit sorry mate i just realised this was a project for you and not a koa wide thing

Yours will be better anyways xxxx

[durban]

However just to confirm, I have no ipad to check this out on but -

Desktop machines should show the page as a full screen like a KO2 Menu.

Small windowed browsers (less than 700px) and Ipads etc should show it as a slightly smaller KO2 Menu (text shrunk to fix, and the main image slightly smaller)

Then on Phones (or anything under 500px) you should just get a vertical menu.


thats the plan anyway

[Danny D]

Shit sorry mate i just realised this was a project for you and not a koa wide thing

Yours will be better anyways xxxx

No, this is a koa public project mate

[Danny D]

However just to confirm, I have no ipad to check this out on but -

Desktop machines should show the page as a full screen like a KO2 Menu.

Small windowed browsers (less than 700px) and Ipads etc should show it as a slightly smaller KO2 Menu (text shrunk to fix, and the main image slightly smaller)

Then on Phones (or anything under 500px) you should just get a vertical menu.


thats the plan anyway

I was thinking of along the lines of a couple of different style sheets but need to brush up on my css first. Thanks for the tips, keep them coming.

[Tripod]

Very impressive, Mark! Love the way it shrinks when making the browser window smaller.

[durban]

Obviously we can change all the menu options to be actual menu items, like FORUM etc and just click to go there

[Danny D]

Wow, I totally missed your link Mark!
It's pretty much complete, well done. And it works on mobile also, bonus points.

I've created a git repo should we ever loose it
https://github.com/DannyCork/kickoff2menu

Now , I'll take you work and modify it for my own personal gain

I'll add key bindings left, right, up , down.