Jump to content

fly-out menu with CSS? (also expandable list)


brynn

Recommended Posts

Hi Friends,

I'm still quite new to CSS. I have a working webpage, but I keep adding more and more and more links to several lists. What I really need is to sort of be able to close up certain sections of a long list. Let's say it's a list of authors (vertical list). I want to be able to either mouseover or click on an author's name, and have all the books they've written....show up....somehow. I'm thinking about something like a fly-out menu.

 

Can anything like that be done with CSS? I've been all over the W3Schools site, trying to find something like that. I'm not really thrilled with the idea of learning how to write a script, but I guess that's how things get automated on webpages, with scripts. If it would be a short script, I might be able to do it. The closest thing that sounds like it might work is JS Navigation. But it turns out that does something not even close to what I need.

 

I wonder if anyone can point me in the right direction, to learn how to do something like that?

 

Thank you very much :D

 

Edit

 

I tweaked the title after msg #37, since the subject of the topic changed as the discussion (and my coding) progressed.

Edited by brynn
Link to comment
Share on other sites

Not only can it be done with just CSS, but it's better to do so in the off chance your client has JS disabled. Look at CSSPlay for some ideas. If you're not sure what you're looking at, ask. The menu basics are quite simple once you know what to look for.

Link to comment
Share on other sites

Ok. I wasn't sure about posting it here, because of the copyright. Here's a bit of the CSS part:

/* hide the sub levels and give them a positon absolute so that they take up no room */.menu ul ul {visibility:hidden;position:absolute;top:0;left:150px;}/* make the second level visible when hover on first level list OR link */.menu ul li:hover ul,.menu ul a:hover ul {visibility:visible;}

It looks like it sets up a class called "menu" for unordered lists, but I don't understand

.menu ul ul

or

.menu ul li:hover ul

or

.menu ul a:hover ul

Does "ul ul" represent the first fly-out?

Edited by brynn
Link to comment
Share on other sites

>> Does "ul ul" represent the first fly-out?

 

Yes. That's why its hidden. I assume the HTML structure nests the second UL in a list item that is a child of the first UL. .menu ul li:hover ul references the same list. When the cursor hovers over the list item, the CSS makes the list visible.

 

Do you understand how descendent selectors work?

Link to comment
Share on other sites

Oh, so "ul ul".....oh ok, I think I understand.

 

Does "ul li" represent all the items in the flyout? And then "ul a" represents all the links?

 

I'd still be interested in the "descendant selectors" that Diedre's Dad mentioned, if it gives me a better understanding :)

 

Thanks dsonesuk :)

Link to comment
Share on other sites

yes! they target all from the one you specifically target and all those beyond in submenu created below it in each case, you target a specific menu by going through hierarchy of menu (unordered list)

 

ul ul { background-color: red;} /*all submenu levels below parent level*/

ul ul ul { background-color: blue;} /*all submenu levelsbelow first submenu level*/

ul ul ul ul{ background-color: green;} /*all submenu levels below second submenu level*/

 

first submenu level styling and beyond will be red.

second submenu styling will take precedence over first making this submenu and all submenus beyond this blue.

third submenu styling will take precedence over second making this submenu and all submenus beyond this green.

Link to comment
Share on other sites

Edit #1(Oops, I missed your last reply until I posted this. Thank you for that. And now I have another question.)/edit

 

Next question. Since I'm not sure how much of the HTML you would need to see to answer this question, I'm posting all of it (which is much smaller than the CSS part):

<div class="menu">	<ul>		<li><a href="../index.html">Item 1</a></li>		<li><a href="#nogo">Item 2</a></li>		<li class="sub"><a href="#nogo">Item 3 »<!--[if gte IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->			<ul>			<li><a href="../index.html">Item 3a</a></li>			<li class="sub"><a href="#nogo">Item 3b »<!--[if gte IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul>					<li><a href="../index.html">Item 3bi</a></li>					<li><a href="#nogo">Item 3bii</a></li>					<li class="sub"><a href="#nogo">Item 3biii »<!--[if gte IE 7]><!--></a><!--<![endif]-->					<!--[if lte IE 6]><table><tr><td><![endif]-->						<ul>							<li><a href="#nogo">Item 3biii-1</a></li>							<li><a href="#nogo">Item 3biii-2</a></li>							<li><a href="#nogo">Item 3biii-3</a></li>							<li><a href="#nogo">Item 3biii-4</a></li>						</ul>					<!--[if lte IE 6]></td></tr></table></a><![endif]-->					</li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3c</a></li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->		</li>		<li><a href="#nogo">Item 4</a></li>		<li><a href="#nogo">Item 5</a></li>		<li><a href="#nogo">Item 6</a></li>	</ul></div>

Ok, so I've colored parts of it the same way it's colored in the source code (although I didn't color everything). My question is about the part in red and green parts. I guess the references to IE6 and IE7 indicate something related to making the code work in those browsers. But otherwise, what does the code in red mean and what does the green mean?

 

I'm not really concerned about IE6, at this point, and maybe not even IE7.....because, didn't I hear that IE10 is either available or close to release? (I'm using Firefox, and haven't kept up with IE lately). But if I'm going to leave it out, I would want to be sure there's not something important about it.

 

Thanks again :)

 

PS -- Uh-oh, the color wasn't retained...let's see if underline will work.... Rats! Ok, let's try this. I'll use parentheses to represent the < and >.

 

(li class="sub")(a href="#nogo")Item 3 »(!--[if gte IE 7])(!--)(/a)(!--(![endif]--> (!--[if lte IE 6])(table)(tr)(td)(![endif]--> (ul)

 

Ok, that seems to work. That shows the red and green I mentioned. (The same string occurs 3 or 4 times, but I just copied 1.)

 

Thanks again :D

Edited by brynn
Link to comment
Share on other sites

Red represent charater coding (ISO 8859-1) http://www.w3schools.com/tags/ref_entities.asp

 

Green is conditional comments that only crappy IE sees and apply whatever is within them to specific versions of IE upto IE9, IE 10 no longer uses these, and should haha work as other better browser rofl.

 

IE10 was intially deployed on windows 8, and later brought out for window 7.

Link to comment
Share on other sites

Red represent charater coding (ISO 8859-1) http://www.w3schools.com/tags/ref_entities.asp

 

Oooohh, I see! There's a tiny character similar to >> at the end of "item 3". Ok, so I can just ignore the IE references, unless I see something for IE 8, 9, or 10. Awesome.

 

Ok, I'll move on and see what I can do. I'll let you know if I either have more questions, or manage to actually make it work, lol!

 

Thanks again :)

Link to comment
Share on other sites

Update: Still struggling. But maybe if someone could explain this.

.menu :hover > a {color:#fff; background:#949e7c;}

Is that a correct selector (.menu :hover > a)? It must be, since their page does work. And I am still very new to CSS. But I surely don't recall a ">" in the CSS tutorials. I know ">" more as part of the tag, than part of the style.

 

It is said to change the style of the text when the mouse hovers over it. But I haven't gotten that to happen yet. And you know, the biggest problem is adapting it to a pre-existing page (which is coded to my own, newbie needs). But if someone could just confirm that it is a proper selector, I'll move on to my next....plan B (probably up to plan G by now, lol). (No worries, I don't even think about giving up until I've gotten to Plan Z :wacko: )

 

Thanks again :)

 

Edit -- Ooohh, I'll bet I know what's wrong! The text which I want to change color on mouseover is not a link. So would I just say something like this??

 

.menu:hover

{color:#color;

background:#color}

Edited by brynn
Link to comment
Share on other sites

OoooooKay! Well after all this work (I did get the text to change color, and the cursor to change on mouseover/hover, and very close to Plan Z) now I realize that fly-out isn't exactly what I need.

 

More like what I need, would be when I mouseover the main li item, all of the 2nd level ul (with it's li's) drop down below it. Sort of like when sometimes I've seen a tiny + and when you click it, everything expands down below it. Or sometimes I;ve seen a tiny, right-pointing arrow, and when you click it, it points down, and a whole list of items expands down below it.

 

Except I don't really want the tiny symbol (....although I guess I could do that, if it has to be necessary, for some reason). I just want to mouseover, and the menu/list drops down, and pushes everything else down, temporarily.

 

I'll go ahead and search around on the site that Dierdre's Dad posted, and maybe I'll figure out what that kind of menu/list is called. But if someone could tell me what it's called....and especially if it can't be done with CSS, I'd appreciate it.

 

Hhmmm....I wonder if it's pretty much the same thing, except with different width and positions???

 

Thanks for your patience while I learn :D

Link to comment
Share on other sites

Ok, well I've found 2 from that Stu Nicholls site, that might work. But I'm afraid they will be too advanced for me, at my current skill level. But just to give you some idea here are the ones that might work:

 

http://www.cssplay.co.uk/menus/cssplay-click-slide.html

and

http://www.cssplay.co.uk/menus/dl-clickslide.html

 

The problems with those: my 2nd level might have 20 or 30 items...I guess that could work. But I don't need the fancy boxes, or tiny click icon. Just the text would do. But the biggest problem for me would be wading through all the extra style code, and just finding the basic codes that make it work.

 

When I was working on the fly-out, I had chosen the most basic version I could find. But I was having to eliminate 3/4 of the style code, that I didn't want. And that was making it hard for me to see the required code that makes it actually work.

 

FYI - The reason the flyout wouldn't work, is that I have 3 columns of 2 level lists (which are currently what I've been calling nested lists). I think the reason I couldn't get the fly out part to work, is because each column is a div element with 30% width. There's no room for anything to fly out, unless it overlaps the next column (or the right edge of the page, in the case of the 3rd column/div).

 

So if anyone who has been willing to read through this whole thread knows of a better alternative for me, I would really appreaciate the tip. Maybe I need to look more at different ways to manage long lists, than menus, per se.

 

Thanks again :)

 

 

Link to comment
Share on other sites

Well, 1 vote of confidence is all I need to try it. I wouldn't be surprised if I run into some situation where using the form code could cause a problem. But I'm willing to give it a go. Thank you SO much -- I really appreciate your patience and your help :D

 

I'll let you know what happens!

Link to comment
Share on other sites

OMG, it absolutely works!!

 

In case the site or webpage where I found this should not be available (at some future time, when someone else might be looking for something like this) I'll post the code.

 

This code came from this page:

 

CSS:

.collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;}

HTML:

<ul class="collapsibleList"> <li>  <label for="mylist-node1">Click to open list 1</label>  <input type="checkbox" id="mylist-node1" />  <ul>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li>  </ul> </li> <li>  <label for="mylist-node2">Click to open list 2</label>  <input type="checkbox" id="mylist-node2" />  <ul>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li>  </ul> </li></ul>

And I can confirm that it's working on Firefox 21.0.

 

Ooohh, bad news. It does not seem to work in IE9, at least not on my version, which may or may not be up to date.

 

The page referenced above says that it is known not to work in IE8 and older, and can only be done with javascript. There's a comment at the bottom of the page: "This code is kind of a hack, but it provides the highest compatibility. It works for all modern browsers and Internet Explorer 6, 7 and 8." But I don't know if it's referring to the code above, or to the code using js.

 

This article is fairly recent, so I'm just not sure what to make of those last comments. Interesting though, in my same IE9, the samples on that article page do appear to work in IE9. Maybe I didn't use all the proper code for IE9 to work, in my sample page. Yeah, that's probably it.

 

If I used this:

<html><head><title>test expand list without scripts</title></head><style>.collapsibleList li > input + *{display: none;}.collapsibleList li > input:checked + *{display: block;}.collapsibleList li > input{display: none;}.collapsibleList label{cursor: pointer;}</style><body><ul class="collapsibleList"> <li>  <label for="mylist-node1">Click to open list 1</label>  <input type="checkbox" id="mylist-node1" />  <ul>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li>  </ul> </li> <li>  <label for="mylist-node2">Click to open list 2</label>  <input type="checkbox" id="mylist-node2" />  <ul>   <li>Item 1</li>   <li>Item 2</li>   <li>Item 3</li>  </ul> </li></ul></body></html>

That doesn't contain all the proper header info does it? Am I right in guessing that to be the reason it's not working in IE9?

 

Edit -- Is pasteing of URLs not allowed? Maybe if I type the URL.... Ok yeah, typing it seems to work. Kind of a pain though.

 

Edit #2 -- I'm trying to post the links to the page where I found this, and the credit that is given there to the original idea. But the URLs don't show up. At first I pasted them, and they did not appear in Preview Post. Then I found I could type them out, and they would show in Preview. But when I posted the message, they are not showing. So I tried.

 

Actually, I really feel like I should provide the credit. But I'm really stymied here :o

Edited by brynn
Link to comment
Share on other sites

Hey guys, I ran into a little problem with this, which I'm hoping you can suggest something that would work.

 

Because I've made some custom bullets, in order to identify certain list items, I made some special IDs with 'list-style-image:url...' Here's an example of code:

#first{list-style-image:url('url1');}#second{list-style-image:url('url2');}<ul class="collapsibleList">    <li>        <label for="mylist-node1">Click to open list 1</label>        <input type="checkbox" id="mylist-node1" />            <ul id="first">                <li>Item 1</li>                <li>Item 2</li>                <li>Item 3</li>            </ul>            <ul id="second">                <li>Item 1</li>                <li>Item 2</li>                <li>Item 3</li>            </ul>    </li>    <li>        <label for="mylist-node2">Click to open list 2</label>        <input type="checkbox" id="mylist-node2" />            <ul>                <li>Item 1</li>                <li>Item 2</li>                <li>Item 3</li>            </ul>    </li></ul>

The problem is that only the items in 'ul id="first"' collapse. And I have 4 of those IDs. I tried enclosing all 4 of the 'ul id="name"' in a single ul tag, but still, only the items in the first id will collapse.

 

I guess I could come up with some other way to identify those 4 groups of list items.... Like maybe I could make some little icons and put the image in front of the text, inside each li tag. I don't know of any reason why you couldn't put an image in a list item.

 

But I keep thinking there must be some way to make the html part of the code work, so that all the ul ids collapse.

 

Do you all have any ideas?

 

Thanks again :)

 

Edit -- formatted the code for easier understanding

Edited by brynn
Link to comment
Share on other sites

Oh hey, I might have fixed it! First I found a couple of tags that were out of order. That didn't fix it at first. But then I tried enclosing it all in a single ul tag again. And that DOES work! The only problem, is that it indents everything by 1 more step. But I think I can override that with relative positioning. I'll try it, and let you know :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...