It’s been a long day and I’m sure I’ll regret asking about what is surely an obvious solution.
I’ve been playing around with a purely CSS drop-down menu (nested lists) which works fine with the topmost triggers firing on mouseover but I want to make them clickable and can’t. Do I need to do this with js? The CSS is in the head tag.
http://www.xiiro.com/demo/dropdown/index.html
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, I doubt very much you can toggle state in “pure” CSS using a click, not unless you change the underlying element. Buuuuuuuttttttt… You could use a checkbox or radio element as your top-level, and then use the :checked pseudo-class to trigger your secondary navigation. So yes, I think you can do this. It’s just going to be a matter of transmogrifying a radio button to a flat graphic with some further css-fu.
Walter
On Sep 30, 2012, at 10:54 PM, Todd wrote:
It’s been a long day and I’m sure I’ll regret asking about what is surely an obvious solution.
I’ve been playing around with a purely CSS drop-down menu (nested lists) which works fine with the topmost triggers firing on mouseover but I want to make them clickable and can’t. Do I need to do this with js? The CSS is in the head tag.
http://www.xiiro.com/demo/dropdown/index.html
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Actually, the floats are killing the top level links. Just changing the .trigger float:left to display:inline-block makes them clickable. There are still a number of other CSS mishaps I’m sorting out, will post my correction soon.
Sent from my iPad
On Oct 1, 2012, at 8:46 AM, Walter Lee Davis email@hidden wrote:
Yes, I doubt very much you can toggle state in “pure” CSS using a click, not unless you change the underlying element. Buuuuuuuttttttt… You could use a checkbox or radio element as your top-level, and then use the :checked pseudo-class to trigger your secondary navigation. So yes, I think you can do this. It’s just going to be a matter of transmogrifying a radio button to a flat graphic with some further css-fu.
Walter
On Sep 30, 2012, at 10:54 PM, Todd wrote:
It’s been a long day and I’m sure I’ll regret asking about what is surely an obvious solution.
I’ve been playing around with a purely CSS drop-down menu (nested lists) which works fine with the topmost triggers firing on mouseover but I want to make them clickable and can’t. Do I need to do this with js? The CSS is in the head tag.
http://www.xiiro.com/demo/dropdown/index.html
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here is my result:
http://cssway.thebigerns.com/workbench/todd_dropmenu/
You must be using some example code - There are a lot of overlaps in the
css. The big offender seemed to be the floats to get the menu inline – not
usually a big deal, maybe the submenu position was conflicting. I used
display:inline-block for the menu elements instead, and that seemed to
work. Also, the CSS was confusing as it mixed selectors and classes. I cut
out what I thought was un-necessary, a lot of it seemed un-necessary. Left
in as many notes as I could to try and make sense, though I am doubtful I
do.
The most important thing I think that affects CSS constructed menus like
this is how padding on the anchor tag affects not just the look of the
menu, but the ‘clickable’ area. You have to plan them so they do not let
the user’s cursor fall into a ‘dead’ zone and interrupt the menu process…
Keep the building process simple as possible helps to backtrack through
rough spots.
Wild stuff, Todd 
–
Ernie Simpson
On Mon, Oct 1, 2012 at 8:55 AM, Ernie Simpson email@hidden wrote:
Actually, the floats are killing the top level links. Just changing the
.trigger float:left to display:inline-block makes them clickable. There are
still a number of other CSS mishaps I’m sorting out, will post my
correction soon.Sent from my iPad
On Oct 1, 2012, at 8:46 AM, Walter Lee Davis email@hidden wrote:
Yes, I doubt very much you can toggle state in “pure” CSS using a click,
not unless you change the underlying element. Buuuuuuuttttttt… You could
use a checkbox or radio element as your top-level, and then use the
:checked pseudo-class to trigger your secondary navigation. So yes, I think
you can do this. It’s just going to be a matter of transmogrifying a radio
button to a flat graphic with some further css-fu.Walter
On Sep 30, 2012, at 10:54 PM, Todd wrote:
It’s been a long day and I’m sure I’ll regret asking about what is
surely an obvious solution.I’ve been playing around with a purely CSS drop-down menu (nested
lists) which works fine with the topmost triggers firing on mouseover but I
want to make them clickable and can’t. Do I need to do this with js? The
CSS is in the head tag.http://www.xiiro.com/demo/dropdown/index.html
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Guys.
Walter, that’s a very interesting suggestion, such a thing had not occurred to me.
TBE, very nice of you to trim the fat. This CSS version was originally much more structurally complex and in the process of making it leaner I think a lot of unnecessary/duplicate CSS got left behind. Ah yes, the float, I often get caught-out by those. Some of the misspellings, e.g., ‘display1’ are actually my quick-n-dirty way of disabling parts vs. commenting-out.
I’ll take a closer look at your changes. Well done.
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
In looking at this, I realized it would make an excellent Accordion, with no JavaScript needed (except for IE < 8, which I don’t care about anyway).
http://scripty.walterdavisstudio.com/pure-css-accordion.html
I thought I invented it for a few minutes, until I googled and found a blog post from three months ago with the same idea.
Might make an interesting Action – a ScriptyAccordion without the Scripty part.
Walter
On Oct 1, 2012, at 11:18 AM, Todd wrote:
Thanks Guys.
Walter, that’s a very interesting suggestion, such a thing had not occurred to me.
TBE, very nice of you to trim the fat. This CSS version was originally much more structurally complex and in the process of making it leaner I think a lot of unnecessary/duplicate CSS got left behind. Ah yes, the float, I often get caught-out by those. Some of the misspellings, e.g., ‘display1’ are actually my quick-n-dirty way of disabling parts vs. commenting-out.
I’ll take a closer look at your changes. Well done.
Todd
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options