Skip to content

Instantly share code, notes, and snippets.

@bennadel

bennadel/select.htm

Created March 21, 2014 11:45
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 bennadel/9684456 to your computer and use it in GitHub Desktop.
Save bennadel/9684456 to your computer and use it in GitHub Desktop.
Download ZIP
Using Transparent Select Menus To Create Styled Menu Roots
Raw
select.htm
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
Using Transparent Select Menus To Create Styled Menu Roots
</title>
<style type="text/css">
div.menu {
position: relative ;
}
div.menu div.root {
background-color: #FF3399 ;
border-radius: 4px ;
color: #FFFFFF ;
font-size: 30px ;
height: 50px ;
line-height: 50px ;
text-indent: 20px ;
width: 200px ;
}
div.menu select {
border: none ;
cursor: pointer ;
height: 50px ;
left: 0px ;
opacity: 0 ;
position: absolute ;
top: 0px ;
width: 200px ;
}
</style>
</head>
<body>
<h1>
Using Transparent Select Menus To Create Styled Menu Roots
</h1>
<!-- BEGIN: Menu. -->
<div class="menu">
<div class="root">
Menu ( <span class="value"></span> )
</div>
<select name="items">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<!-- END: Menu. -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
var dom = {
menu: $( "div.menu" ),
root: $( "div.root" ),
value: $( "div.root span.value" ),
select: $( "div.menu select" )
};
// Echo the initially selected value.
dom.value.text( dom.select.val() );
// Echo selected value in the menu DOM.
dom.select.change(
function( event ) {
dom.value.text( dom.select.val() );
}
);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment