Page 1 of 2

ko2 menu website project

Posted: Tue Jun 23, 2015 12:19 pm
by 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.

Image

Re: ko2 menu website project

Posted: Tue Jun 23, 2015 12:24 pm
by 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.

Re: ko2 menu website project

Posted: Tue Jun 23, 2015 2:08 pm
by 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

Re: ko2 menu website project

Posted: Tue Jun 23, 2015 2:23 pm
by 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.

Re: ko2 menu website project

Posted: Tue Jun 23, 2015 7:54 pm
by 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

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 11:24 am
by 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

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 11:26 am
by 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

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 12:06 pm
by 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 :)

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 12:14 pm
by Danny D
durban wrote: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 :)

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 12:15 pm
by Danny D
durban wrote: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.

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 12:57 pm
by Tripod
Very impressive, Mark! Love the way it shrinks when making the browser window smaller.

Re: ko2 menu website project

Posted: Wed Jun 24, 2015 1:36 pm
by durban
Obviously we can change all the menu options to be actual menu items, like FORUM etc and just click to go there ;)

Re: ko2 menu website project

Posted: Wed Jul 29, 2015 4:14 pm
by 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.