Re: dynamic menu with show hide capabilities - understanding possible workflow

On Mon, 2009-10-26 at 08:49 -0700, Jim Lucas wrote: > MEM wrote: > > Thank you all. > > > > Ok. Please stay with me, cause I still have some doubts. > > Not only do I need to display the subitems on click but also, when the user clicks on one > > menu item, I need to change the URI as well. > > Why? Because, each time the user clicks on a menu item (whateaver that item as childs or > > not), I want to display a list of products related to the clicked item. > > > > So, I was trying to avoid js, because, I don’t know that much about js. However, I’d > > like to do it properly, so, the only way I was allowing the use of js, was by do not disabling the > > back button functionality and by allowing a add to favorites option as well, allowing the URI > > changing… O.o > > The JS part isn't for clicking at all. Rather, it is for hovering. > > Since IE doesn't have hover on any element besides the anchor, it is used to > mimic hovering in IE. > > Use the following example to add the hover ability to your app. > > http://snipplr.com/view/1912/internet-explorer-ie6-css-hover/ > > > > > Anyway, let’s face it: > > Js is my only option, could this be a nice workflow, for an unobtrusive solution? > > Remember, JS is only used to create the ability for IE to hover over elements :) > > > > > > > 1) Generate the multidimensional array from query. > > 2) Generate the ul / li menu (echo + foreach) displaying all child elements as well. > > 3) Apply the anchor to the list items. > > NO!!! don't do the following! > > > 4) Apply some js to that ul / li that: > > 4.1) will be responsible for show/hide elements. > > 4.2) Will be responsible to show/hide elements only when some DOM node(?) as children. > > 4.3) Change the URI on click, so that some information can be showed based on uri segment. > > > > > > Can I have your help to fill the blanks here, or, if there are to many, just an > > orientation reference, in order to get started… > > > > > > Now to satisfy the people that are going to ask the inevitable question "What if > JS is turned off??" > > Show everything by default. Then, using JS, hide all that should be hidden and > go from their. > > > > > Thanks a lot once again, > > Márcio > > > > > > > > > > From: Ashley Sheridan [mailto:ash@ashleysheridan.co.uk] > > Sent: segunda-feira, 26 de Outubro de 2009 14:38 > > To: MEM > > Cc: php-general@lists.php.net > > Subject: Re: [PHP] dynamic menu with show hide capabilities - understanding possible > > workflow > > > > On Mon, 2009-10-26 at 13:28 +0000, MEM wrote: > > > > Hello all, > > > > I'm on my way to build my first dynamic menu using php. > > However, each time I say this, people start jumping at me crying out loud: > > "Jquery" . > > I don't need js for this. Really. (At least, this is what I believe). > > > > So I was wondering if It's possible to accomplish it, by using css and php > > only. > > > > > > If so, I'm wondering if something like this it's a good way for doing this: > > > > 1) > > Generate a multidimensional array from database table containing categories > > and subcategories. > > > > 2) > > Create a css file with two classes one that shows, another that hides. > > > > 3) > > Grab that array and: > > 3.1) print it recursively (no idea how to accomplish this) > > 3.2) print it with some sort of class="showThis" inside the generated html > > element. > > 3.3) make a conditional somewhere (I really don't know where, and this may > > be related with the recursion doubt), in order to display the children > > elements, only when we click the parent element. > > > > And here resides my main doubt: Is the point 3.3 feasible without the use of > > js? > > > > > > > > I just need some directions please, > > > > Regards, > > Márcio > > > > > > > > > > Everything there is feasible without Javascript except for the clicking part, which is > > pretty essential to what you want. Pure CSS-only menus are still unavailable because of IE, so using > > some Javascript is your only option really. > > > > Is there a particular reason you are shying away from Javascript in this case? There are > > ways you can construct drop-down menus in a way that if Javascript is unavailable, then they fall > > back to becoming a bog-standard navigation bar. > > > > Also, before anyone mentions them, <select> lists are not the same thing as a > > drop-down menu, and navigating to different parts of a document upon changing the selected option is > > actually breaking their default behavior, and can become confusing to people who expect them to work > > as select lists. > > > > Thanks, > > Ash > > http://www.ashleysheridan.co.uk > > > > > > > > > I've always gone the route of having the drop-downs just accompany a standard, regular, functioning navigation bar. That way, if someone has Javascript turned off, they are still able to use a standard, regular, functioning navigation bar. Thanks, Ash http://www.ashleysheridan.co.uk