Re: [css-d] Responsive navigation menu as in Wordpress
Just right click and "view source" for any of those responsive examples. Code's all there. On 1/26/13 4:44 AM, "Koen van der Drift" wrote: >Actually, I am *not* looking for a menu solution, I don't like >those either. I now understand what you meant by those. > >The examples in the link are nice, but unfortunately there is no code >with it. > >So back to my original question, how do I make a navigation menu appear >using css? I'm not sure what you mean by "off canvas" approach? > >- Koen. > >On Jan 24, 2013, at 19:51, Philippe Wittenbergh wrote: > >> >>Have you looked into other design patterns ? For example some of those >>listed under the 'navigation' heading: >> http://bradfrost.github.com/this-is-responsive/patterns.html >> __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Actually, I am *not* looking for a menu solution, I don't like those either. I now understand what you meant by those. The examples in the link are nice, but unfortunately there is no code with it. So back to my original question, how do I make a navigation menu appear using css? I'm not sure what you mean by "off canvas" approach? - Koen. On Jan 24, 2013, at 19:51, Philippe Wittenbergh wrote: > > Le 25 janv. 2013 à 01:22, Koen van der Drift a > écrit : > >> I am looking to transfer a navigation list into a menu that many >> Wordpress pages have on a small screen. Not sure where to start, >> though, any suggestions? > > Everybody seems to suggest those menu solutions. I personally find > those horrible to use > Have you looked into other design patterns ? For example some of those listed > under the 'navigation' heading: > http://bradfrost.github.com/this-is-responsive/patterns.html > > Many of those use a so-called 'off-canvas' approach - you don't really need > to put that navigation off-canvas when hidden, you could use absolute > positioning to open the navigation list over the content when 'open'. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com > > > > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Philippe, just wanted to thank you for this link. I, too, have grown weary of the "select" for a responsive menu. It's very visually disruptive when you go to make a selection, it requires multiple clicks, and just seems like a cheap "cheat". This link had so many great ideas, not just for nav, but for tables, forms, so many things. It prompted me to completely rethink the UI I am deep into designing right now. Combined with some of the thinking in the previous links on this thread (especially, the "mobile first" perspective) I _finally_ think I have a design for the intensely complex project I'm working on. Thank you so much. You saved my sanity (or what's left of it). Chris On 1/24/13 4:51 PM, "Philippe Wittenbergh" wrote: >Everybody seems to suggest those menu solutions. I personally >find those horrible to use >Have you looked into other design patterns ? For example some of those >listed under the 'navigation' heading: >http://bradfrost.github.com/this-is-responsive/patterns.html > >Many of those use a so-called 'off-canvas' approach - you don't really >need to put that navigation off-canvas when hidden, you could use >absolute positioning to open the navigation list over the content when >'open'. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
On Jan 24, 2013, at 7:51 PM, Philippe Wittenbergh wrote: > Everybody seems to suggest those menu solutions. I personally find > those horrible to use > Have you looked into other design patterns ? For example some of those listed > under the 'navigation' heading: > http://bradfrost.github.com/this-is-responsive/patterns.html > > Many of those use a so-called 'off-canvas' approach - you don't really need > to put that navigation off-canvas when hidden, you could use absolute > positioning to open the navigation list over the content when 'open'. Thanks for the link, some nice ideas there. - Koen. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Le 25 janv. 2013 à 01:22, Koen van der Drift a écrit : > I am looking to transfer a navigation list into a menu that many > Wordpress pages have on a small screen. Not sure where to start, > though, any suggestions? Everybody seems to suggest those menu solutions. I personally find those horrible to use Have you looked into other design patterns ? For example some of those listed under the 'navigation' heading: http://bradfrost.github.com/this-is-responsive/patterns.html Many of those use a so-called 'off-canvas' approach - you don't really need to put that navigation off-canvas when hidden, you could use absolute positioning to open the navigation list over the content when 'open'. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
And Zurb Foundation: http://foundation.zurb.com/ Regards -- Tony On 1/24/2013 12:27 PM, Greg Gamble wrote: You should check out Twitter Bootstrap:http://twitter.github.com/bootstrap/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
You should check out Twitter Bootstrap: http://twitter.github.com/bootstrap/ Greg Gamble SBCTC - Olympia | Information Services p - 360-704-4376 think before printing -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Koen van der Drift Sent: Thursday, January 24, 2013 9:14 AM To: Tom Livingston Cc: css-d@lists.css-discuss.org; Hakan Kirkan Subject: Re: [css-d] Responsive navigation menu as in Wordpress No, what I mean does not have that type of menu. The 'hongkiat' tutorial that Hakan posted is more what I had in mind. - Koen. On Jan 24, 2013, at 12:04, Tom Livingston wrote: > This? > > http://tinynav.viljamis.com/ > > > On Thu, Jan 24, 2013 at 11:37 AM, Koen van der Drift > wrote: >> Thanks for the pointers. I should have mentioned it is not for a WP page :-) >> >> - Koen. >> >> On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: >> >> > Here is a tutorial >> > >> > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ >> > >> > and a plug in for WP >> > http://wordpress.org/extend/plugins/responsive-select-menu/ >> > >> > >> > Hakan KIRKAN >> > IT Manager >> > http://miamirealestateinc.com >> > Miami/ FL >> > >> > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift >> > wrote: >> >> I am looking to transfer a navigation list into a menu that many >> >> Wordpress pages have on a small screen. Not sure where to start, >> >> though, any suggestions? >> >> >> >> Thanks, >> >> >> >> - Koen. >> >> __ >> >> css-discuss [css-d@lists.css-discuss.org] >> >> http://www.css-discuss.org/mailman/listinfo/css-d >> >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> >> List policies -- http://css-discuss.org/policies.html >> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
No, what I mean does not have that type of menu. The 'hongkiat' tutorial that Hakan posted is more what I had in mind. - Koen. On Jan 24, 2013, at 12:04, Tom Livingston wrote: > This? > > http://tinynav.viljamis.com/ > > > On Thu, Jan 24, 2013 at 11:37 AM, Koen van der Drift > wrote: >> Thanks for the pointers. I should have mentioned it is not for a WP page :-) >> >> - Koen. >> >> On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: >> >> > Here is a tutorial >> > >> > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ >> > >> > and a plug in for WP >> > http://wordpress.org/extend/plugins/responsive-select-menu/ >> > >> > >> > Hakan KIRKAN >> > IT Manager >> > http://miamirealestateinc.com >> > Miami/ FL >> > >> > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift >> > wrote: >> >> I am looking to transfer a navigation list into a menu that many >> >> Wordpress pages have on a small screen. Not sure where to start, >> >> though, any suggestions? >> >> >> >> Thanks, >> >> >> >> - Koen. >> >> __ >> >> css-discuss [css-d@lists.css-discuss.org] >> >> http://www.css-discuss.org/mailman/listinfo/css-d >> >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> >> List policies -- http://css-discuss.org/policies.html >> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
This? http://tinynav.viljamis.com/ On Thu, Jan 24, 2013 at 11:37 AM, Koen van der Drift < koenvanderdr...@gmail.com> wrote: > Thanks for the pointers. I should have mentioned it is not for a WP page > :-) > > - Koen. > > On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: > > > Here is a tutorial > > > > > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ > > > > and a plug in for WP > > http://wordpress.org/extend/plugins/responsive-select-menu/ > > > > > > Hakan KIRKAN > > IT Manager > > http://miamirealestateinc.com > > Miami/ FL > > > > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift < > koenvanderdr...@gmail.com> wrote: > >> I am looking to transfer a navigation list into a menu that many > >> Wordpress pages have on a small screen. Not sure where to start, > >> though, any suggestions? > >> > >> Thanks, > >> > >> - Koen. > >> __ > >> css-discuss [css-d@lists.css-discuss.org] > >> http://www.css-discuss.org/mailman/listinfo/css-d > >> List wiki/FAQ -- http://css-discuss.incutio.com/ > >> List policies -- http://css-discuss.org/policies.html > >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Thanks for the pointers. I should have mentioned it is not for a WP page :-) - Koen. On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: > Here is a tutorial > > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ > > and a plug in for WP > http://wordpress.org/extend/plugins/responsive-select-menu/ > > > Hakan KIRKAN > IT Manager > http://miamirealestateinc.com > Miami/ FL > > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift > wrote: >> I am looking to transfer a navigation list into a menu that many >> Wordpress pages have on a small screen. Not sure where to start, >> though, any suggestions? >> >> Thanks, >> >> - Koen. >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Tutorial http://www.hongkiat.com/blog/responsive-web-nav/ and for WP mobile http://maxfoundry.com/blog/responsive-mobile-navigation-in-wordpress/ On Thu, Jan 24, 2013 at 11:35 AM, Hakan Kirkan wrote: > Here is a tutorial > > > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ > > and a plug in for WP > http://wordpress.org/extend/plugins/responsive-select-menu/ > > > Hakan KIRKAN > IT Manager > http://miamirealestateinc.com > Miami/ FL > > > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift < > koenvanderdr...@gmail.com> wrote: > >> I am looking to transfer a navigation list into a menu that many >> Wordpress pages have on a small screen. Not sure where to start, >> though, any suggestions? >> >> Thanks, >> >> - Koen. >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Here is a tutorial http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ and a plug in for WP http://wordpress.org/extend/plugins/responsive-select-menu/ Hakan KIRKAN IT Manager http://miamirealestateinc.com Miami/ FL On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift < koenvanderdr...@gmail.com> wrote: > I am looking to transfer a navigation list into a menu that many > Wordpress pages have on a small screen. Not sure where to start, > though, any suggestions? > > Thanks, > > - Koen. > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
