On Thu, May 7, 2009 at 11:01 AM, Iceberg <[email protected]> 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
<http://127.0.0.1:8000/examples/global/vars/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
> 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 <[email protected]> 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
> >
> > On Sun, May 3, 2009 at 5:14 AM, Iceberg <[email protected]> wrote:
> > > 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
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"web2py Web Framework" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/web2py?hl=en
-~----------~----~----~----~------~----~------~--~---
