Cascading menu

[Iceberg]

Hi folks,

There are intermittent discussion about cascading menu from time to time.
http://groups.google.com/group/web2py/msg/9a04650f84649641
and recently:
http://groups.google.com/group/web2py/browse_frm/thread/cbe3556820e885bb

In this mail I attach a cascade menu draft. It is just a prototype far from being finished, because I am not good at css at all. I just try to define a kind of higher level syntax and make it work. The syntax features include:

* Each menu item can have a text label AND/OR an image icon.
* Submenus are appeared in a recursive way.

Volunteers are welcome to polish the work.

The only four major files I modified or introduced in this app are as below.

static/grcmenu.css # It actually comes from here (http://splike.com/projects/cssmenu.html)

models/menu.py # In final version, this would be adjusted into modules/menu.py

views/layout.html # Only one line genMenu(...) is inserted

controllers/default.py # The main sample

static/*.gif # Optional

Sincerely,
Iceberg, 2009-May-03, 18:00(PM), Sun

[Yarko Tymciurak]

Hi Iceberg -

Thanks for this effort.

I just looked, and I would like to see the "onmouseover" removed - this is something that should not be in the layout, but generated by the applicaiton.  The default behavior can be set in the css;  have a look at the source to http://meyerweb.com/eric/css/edge/menus/demo.html for how that can be accomplished.

You can also see how he's accomplished a relative submenu thru pure CSS there too (so the function perhaps doesn't need to exist to generate the menus).

You can see example of showing (and positioning) images w.r.t. menus in http://meyerweb.com/eric/css/edge/popups/demo2.html

I think that the menus / layout we want to achieve would  push it all into css, so that it would be easily modified by the application at runtime, and involve minimum code to "setup".

I don't know CSS any either, but just got a few books and have been reading nights, so I am starting to get some concrete ideas on this.

Hope you find the code in these links helpful.

Regards,
Yarko

[Iceberg]

@Yarko:
Sorry that I don't quite get your point about the "onmouseover" and
the "The default behavior can be set in the css". Currently what I did
is supposed to be a pure css menu, based on the "grc menu" suggested
by Massimo here:
http://groups.google.com/group/web2py/msg/9a04650f84649641

The "grc menu" is already a feasible pure css pop-up menu. (To
Massimo: Perhaps the content in main body of my example app is too
little to demonstrate the pop-up effect, but yes, it is already a pop-
up menu system.)

But I have to admit that I know too little about css, that I failed to
show "grc menu" at the upper-right conner in our layout.html.
Otherwise it can fully replace the current response.menu .

Css experts in this maillist, please please take over the menu
prototype and make it work...

On May4, 2:37am, Yarko Tymciurak <yark...@gmail.com> wrote:
> Hi Iceberg -
>
> Thanks for this effort.
>
> I just looked, and I would like to see the "onmouseover" removed - this is
> something that should not be in the layout, but generated by the
> applicaiton.  The default behavior can be set in the css;  have a look at

> the source tohttp://meyerweb.com/eric/css/edge/menus/demo.htmlfor how that

> can be accomplished.
>
> You can also see how he's accomplished a relative submenu thru pure CSS
> there too (so the function perhaps doesn't need to exist to generate the
> menus).
>

> You can see example of showing (and positioning) images w.r.t. menus inhttp://meyerweb.com/eric/css/edge/popups/demo2.html

>
> I think that the menus / layout we want to achieve would  push it all into
> css, so that it would be easily modified by the application at runtime, and
> involve minimum code to "setup".
>
> I don't know CSS any either, but just got a few books and have been reading
> nights, so I am starting to get some concrete ideas on this.
>
> Hope you find the code in these links helpful.
>
> Regards,
> Yarko
>

[Yarko Tymciurak]

On Thu, May 7, 2009 at 11:01 AM, Iceberg <ice...@21cn.com> wrote:

@Yarko:
Sorry that I don't quite get your point about the "onmouseover" and
the "The default behavior can be set in the css".

Sorry... I see what I was looking at - I was looking at your layout.html, which has:

{{for _name,_active,_link in response.menu:}}

     <li><a href="{{=_link}}" onmouseover="this.ccc=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.ccc;" {{if not _active:}}class="inactive"{{pass}}>{{=_name}}</a></li>

     {{pass}}

It looks like you're not using that, so I was confused but it.

Thanks for your effort.  If you look at the link I provided (http://meyerweb.com/eric/css/edge/menus/demo.html),

You'll see how much simpler it is, and there is not (in that example) a need for "level 2" and "level 3";  instead it uses relationship markers, so it looks like this:

---------------------

<div id="rtnv"> 

<h4>meyerweb</h4> 

  <ul> 

  <li><a href="http://www.meyerweb.com/eric/talks/">Speaking</a></li> 

  <li><a href="http://www.meyerweb.com/eric/writing.html">Writing</a></li> 

  <li class="sub"><a href="http://www.meyerweb.com/eric/books/">Books</a> 

    <ul> 

    <li><a href="http://www.meyerweb.com/eric/books/css-tdg">CSS:TDG</a></li> 

-------------------

The  rtnv effected by this kind of css:

----------

#rtnv {position: absolute; top: 6em; right: 0; width: 8em; margin: 0; padding: 0; font-family: Arial, sans-serif;}

#rtnv > ul {width: 9em; margin-left: -1px; font-size: 85%;}

#rtnv ul {border: 1px solid silver; border-width: 0 0 0 1px;}

#rtnv ul li {border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em;}

#rtnv ul ul {border-width: 0 1px 1px 1px; border-color: gray silver gray gray;}

#rtnv ul ul li {border-color: #FEFEFC;}

#rtnv li > a {background-color: transparent; padding: 3px;}

#rtnv li:hover {background-color: #EED;}

#rtnv li.sub:hover {margin-left: -10.2em; border: 1px solid gray; background: #DDB;}

#rtnv li.sub:hover > a {color: #330;}

#rtnv li.sub:hover > ul {top: 1.75em; left: -1px; background: #FEFEFC;}

----------------

So this is this kind of (cool!) stuff:

#rtnv > ul

says  "ul's which are a child of the rtnv class...."

"sub" says list items which have submenues (any nesting), so 

#rtnv li.sub:hover > ul

defines how lists which or children of li.sub's behave (and more - they only appear on hovering over that li - this is _cool_ stuff!)

Anyway, like you, I don't know CSS much, but am getting excited by reading up some.

I think Eric Meyer's approach (above) is a clean, compact approach, and wanted to share the concepts.  I have some reading left to do before I can make my own "design" using these concepts, but from looking at the html (above) I can easily imagine nested lists passed to the view, and turned into this....

Discovery & learning is FUN, isn't it?

Thanks for sharing your menu implementation!

Regards,

Yarko

[Yarko Tymciurak]

On Thu, May 7, 2009 at 11:44 AM, Yarko Tymciurak <yar...@gmail.com> wrote:

...... 

#rtnv {position: absolute; top: 6em; right: 0; width: 8em; margin: 0; padding: 0; font-family: Arial, sans-serif;}

#rtnv > ul {width: 9em; margin-left: -1px; font-size: 85%;}

#rtnv ul {border: 1px solid silver; border-width: 0 0 0 1px;}

#rtnv ul li {border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em;}

#rtnv ul ul {border-width: 0 1px 1px 1px; border-color: gray silver gray gray;}

#rtnv ul ul li {border-color: #FEFEFC;}

Actually, I think this (above) defines the depth - ul ul ...

But this is still pretty simple, and extensible...   still learning to understand this... ;-)

[mdipierro]

I came across this.

http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html

Massimo

On May 7, 11:47 am, Yarko Tymciurak <yark...@gmail.com> wrote:

[Yarko Tymciurak]

This is pretty nice - and tested on many browsers...

I need to build Chrome for Ubuntu soon (so I can test here too);  I already like it on windows, and it's on mobile (android) so I'm paying increasing attention to Chrome...

[Iceberg]

I am glad that this post gather more and more attention. :-)

It is somewhat interesting to me that, firstly I encountered this menu
solution and its appeal looks promising even today:
http://www.grc.com/menu2/invitro.htm
then Yarko also gives a good reference days before:
http://meyerweb.com/eric/css/edge/menus/demo.html
and then Massimo just shares the "Ruthsarian Menus" which claims to be
better than the above one, yet there seems still some tricky part such
as "the whitespace" issue mentioned in its doc:
http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html

Well, I know the above lists would grow from time to time, because new
menu solution will arise. That is nothing wrong at all. But for me, I
am just not a css veteran so I focus on define a set of general menu
api in web2py, hopefully it would be stable enough, so that any latest
(and coolest) css menu solution can be adapted into web2py easily.

Actually my first attempt of "grc menu" was almost fully successful
except somehow I could not make it appear at the same place of the
current web2py menu area and replace it. //shrug

Helps are welcome.

[Yarko Tymciurak]

On Fri, May 8, 2009 at 11:36 PM, Iceberg <ice...@21cn.com> wrote:

.....

...focus on define a set of general menu

api in web2py, hopefully it would be stable enough, so that any latest
(and coolest) css menu solution can be adapted into web2py easily.

Yep --- and there are a few vectors to "cool" - one being basically a CSS only API, that is a div name and a list for the application writer is all it takes to create your menus.... THAT is COOL ;-)

Simple is better, and it seems for menus (and more) it is within grasp!