Is this type of thing possible with CSS?

HTML & CSS
1

Hi there everyone :slight_smile:

My father was asking me if it was possible and I assured him it was but have found it impossible so far to find an already-made example of what he’s hoping to achieve. Here’s what he would like.

He would like a link to open up a vertical box, much like a selection box, but housing links one above another. He’ll have around 30 links in it, but for the sake of compactness, he would like the box to show only 10 links and have a scrollbar to view the rest. Once opened by clicking the link, he would like the box to remain open until the user clicks somewhere outside the box(and not disappear when no longer moused-over).

Is this possible via CSS or did I lie to him? My own attempts have failed miserably and would greatly appreciate the help!

Thanks for your time!

2

Do you know how hard is is for me to resist the temptation of getting that pic of grumpy cat saying ‘no.’

But seriously, it depends.

I will assume your dad coded his HTML correctly and am dealing with a navigation menu and not something that should otherwise be a SELECT/OPTION.

You can take advantage of the :target pseudo class.


 <html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
#test, #test+div {	display:none;}
#test:target, #test:target +div {display:block;}
#test:target { height:4em;overflow:auto;  }
		</style>
	</head>
	<body>
<div><a href="#test">link</a></div>
<ul id='test'>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
</ul>
<div><a href="#">close</a>

	</body>
</html>

similarly, tho less semantic, you could use a checkbox and :checked as a proper toggle.


 <html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
#test +ul {	display:none; height:4em;overflow:auto;}
#test:checked + ul {display:block;}
 		</style>
	</head>
	<body>
<input  id='test' type='checkbox'><ul>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
 	<li><a href="#">item</a></li>
</ul>

	</body>
</html>

However, the ‘selection’ will not close automatically. the user will need to click on another item ( be it another link on the first example , unckeck the checkbox ) or in order to close the window.

Also, both of my preview example should be used with caution as they are not fully cross browser friendly ( tho all current versions of the major browsers provide support )

The effect can be achieved with MINOR bits of JS and some CSS class switching. The part which would be resource intensive, even with JS, for the UA in my opinion is wanting hide the element when the user clicks OUTSIDE the element. onclick events are part of object elements, so they only detect when they happen on the element. that means , even with js, your dad would have to make the script:

  1. check to see if the window is already open or not ( easy enough, since we are ussing a CSS class, we could check to see if the class is one of the element attributes)
  2. have the BODY and EVERY other element ( as it’s possible the user could chose to click on a drop down or whatever; anyway the point is I wouldnt feel safe relying on the event bubbling up from the BODY tag) have an onclick event that closes the list element , if it’s open.

Sorry there was no simple answer on this one, anyway I hope that helps

3

Thank you for both your restraint with grumpy cat and for helping me out :slight_smile:

Is there any way to get the CSS to behave in such a way that the container closes when the mouse is clicked elsewhere?