Skip to content

Instantly share code, notes, and snippets.

@jefffis

jefffis/gist:5221491

Last active December 15, 2015 07:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jefffis/5221491 to your computer and use it in GitHub Desktop.
Save jefffis/5221491 to your computer and use it in GitHub Desktop.
Download ZIP
A thought on not using <select> elements for dropdown lists outside of forms. It's more meaningful to the browser, works without JS, and MUCH easier to style for us designy types.
Raw
gistfile1.txt
<html>
<head>
<style>
/*
// CSS
these styles can be anything, but this was from a recent project.
basically, i'm setting the height of the <ul> and each <li> and only on :hover showing all of them. when clicking a list item, that is then showed as .selected when a user :hoversout of the <ul>
*/
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
border:0;
}
html, body {
width:100%;
height:auto;
}
.list {
font:bold 100%/1.5 sans-serif;
width:50%;
margin:3em;
background:#0575bd;
height:40px;
overflow:hidden;
position:absolute;
border-radius:2px;
box-shadow:0 0 3px rgba(0,0,0,0.2), 0 0 15px rgba(0,0,0,0.1);
}
.list:hover {
height:auto;
overflow:visible;
}
.list:before {
content:"";
display:block;
position:absolute;
border-top:5px solid white;
border-right:5px solid transparent;
border-left:5px solid transparent;
top:23px;
right:10px;
}
.list:after {
content:"";
display:block;
position:absolute;
border-bottom:5px solid white;
border-right:5px solid transparent;
border-left:5px solid transparent;
top:13px;
right:10px;
}
.list li {
list-style:none;
color:white;
display:none;
border-radius:2px 2px 0 0;
}
.list li + li {
border-radius:0;
}
.list li:last-child {
border-radius:0 0 2px 2px;
}
.list:hover li, .list .selected {
display:list-item;
}
.list li a {
color:white;
text-decoration:none;
display:block;
height:auto;
padding:10px;
line-height:1.2;
background:#269dce;
border-bottom:1px solid rgba(0,0,0,0.1);
border-top:1px solid rgba(255,255,255,0.25);
border-radius:2px 2px 0 0;
text-shadow:0 1px 0 rgba(0,0,0,0.3), 0 2px 1px rgba(0,0,0,0.05);
}
.list li:first-child a {
border-top:0;
}
.list li + li a {
border-radius:0;
}
.list li:last-child a {
border-radius:0 0 2px 2px;
border-bottom:0;
}
.list li a:hover, .list:hover .selected a {
background:#0575bd;
}
.list ul .selected a {
height:40px;
}
.list:hover .selected a {
height:auto;
}
</style>
</head>
<body>
<!-- htmlness -->
<ul id="list" class="list">
<li class="selected"><a href="#some-path">Some Title</a></li>
<li><a href="#some-other-path">Some Other Title</a></li>
<li><a href="#some-tertiary-path">Some Tertiary Title</a></li>
</ul>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
/*
// JS
assumes jquery loaded, but can be easily done without. just finding the <ul>, caching the <li>s, and then doing a bit of AJAX, DOM-manip onclick.
*/
$(function(){
// cache elements
var $list = $('#list');
var $list_items = $list.find('a');
// do something
$list_items.on('click',function(){
var $this = $(this);
var $content = $('#content'); // cache page container to drop the content
var $this_url = $this.attr('href');
$list_items.parent().removeClass('selected');
$this.parent().addClass('selected');
$content.load($this_url+' #content'); // load in content from link via $.load
return false;
});
});
/*
by not using a <select> element, we inherently give meaning to this content via the list items and anchor links therein each.
plus, if JS is turned off, the behavior will still work as browsers expect them to
*/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment