Faked Selectbox - XHTML Snipplr Social Repository

Revision: 26656

at May 5, 2010 17:55 by skrumskii

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<script type="text/javascript">document.documentElement.className += 'js';</script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<style type="text/css">		
		ul#state-menu {
			width: 240px;
			background: #ccc;
		}
		ul#state-menu li {
			list-style-type: none;
		}
                ul#state-menu ul,
		ul#state-menu li.first,
		.js ul#state-menu li.last {
			display: none;
		}		
		ul#state-menu li.last,
		.js ul#state-menu li.first,
		ul#state-menu li.expand ul {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {	
			$('ul#state-menu li.first').toggle(function() {
				$(this).addClass('expand');
			}, function() {
				$(this).removeClass('expand');
			});
		 });
	</script>
</head>
<body>
	<ul id="state-menu">
		<li class="first"><a href="#">Main Item</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Noscript Item</a></li>
	</ul>
</body>
</html>

Revision: 26655

at May 5, 2010 16:40 by skrumskii

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<script type="text/javascript">document.documentElement.className += 'js';</script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<style type="text/css">		
		* {
			padding:0;
			margin:0;
		}	
		ul#state-menu {
			width: 240px;
			background: #ccc;
		}
		ul#state-menu li {
			list-style-type: none;
		}
		ul#state-menu ul {
			display: none;
		}
		ul#state-menu li.first,
		.js ul#state-menu li.last {
			display: none;
		}		
		ul#state-menu li.last,
		.js ul#state-menu li.first,
		ul#state-menu li.expand ul {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {	
			$('ul#state-menu li.first').toggle(function() {
				$(this).addClass('expand');
			}, function() {
				$(this).removeClass('expand');
			});
		 });
	</script>
</head>
<body>
	<ul id="state-menu">
		<li class="first"><a href="#">Main Item</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Noscript Item</a></li>
	</ul>
</body>
</html>

Revision: 26654

at May 5, 2010 16:29 by skrumskii

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<script type="text/javascript">document.documentElement.className += 'js';</script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<style type="text/css">		
		* {
			padding:0;
			margin:0;
		}	
		ul#state-menu {
			width: 240px;
			background: #ccc;
		}
		ul#state-menu li {
			list-style-type: none;
		}
		ul#state-menu ul {
			display: none;
		}
		ul#state-menu li.first,
		.js ul#state-menu li.last {
			display: none;
		}		
		ul#state-menu li.last,
		.js ul#state-menu li.first,
		ul#state-menu li.expand ul {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {	
			$('ul#state-menu li.first').toggle(function() {
				$(this).addClass('expand');
			}, function() {
				$(this).removeClass('expand');
			});
		 });
	</script>
</head>
<body>
	<ul id="state-menu">
		<li class="first"><a href="#">Main Item</a>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 1</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Noscript Item</a></li>
	</ul>
</body>
</html>

Revision: 26653

at May 5, 2010 16:14 by skrumskii

Initial Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<script type="text/javascript">document.documentElement.className += 'js';</script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<style type="text/css">		
		* {
			padding:0;
			margin:0;
		}	
		ul#state-menu {
			width: 240px;
			background: #ccc;
		}
		ul#state-menu li {
			list-style-type: none;
		}
		ul#state-menu ul {
			display: none;
		}
		ul#state-menu li.first,
		.js ul#state-menu li.last {
			display: none;
		}		
		ul#state-menu li.last,
		.js ul#state-menu li.first,
		ul#state-menu ul.expand {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {	
			$('ul#state-menu li.first').toggle(function() {
				$('ul#state-menu li.first ul').addClass('expand');
				
			}, function() {
				$('ul#state-menu li.first ul').removeClass('expand');
			});
		 });
	</script>
</head>
<body>
	<ul id="state-menu">
		<li class="first"><a href="#">AusgewÃƒï¿½Ã‚Â¤hltes Land</a>
			<ul>
				<li><a href="#">ein weiteres Land</a></li>
				<li><a href="#">noch ein Land</a></li>
				<li><a href="#">und noch ein Land</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Ãƒï¿½Ã¯Â¿Â½bersichtsseite</a></li>
	</ul>
</body>
</html>

Initial URL

Initial Description

Initial Title

Faked Selectbox

Initial Tags

css, xhtml, jquery

Initial Language

XHTML

Choose a language for easy browsing: