ich habe mal eine Frage an euch.
Ich habe mir von der Seite jsfiddle.net/fh6p4/ das Mobil Menü angeschaut und möchte es für ein ilch Design nutzen.
Ich habe alles von der Seite in eine Index.html eingefügt.
Jetzt will das Menü nicht sliden (beim drauflicken), weiß jemand was der Fehler sein könnte?
Hier mal die Index die ich erstellt habe:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Slide menu test</title>
<script type="text/javascript">
$('#button').toggle(
function() {
$('#right').animate({ left: 250 }, 'slow', function() {
$('#button').html('Close');
});
},
function() {
$('#right').animate({ left: 0 }, 'slow', function() {
$('#button').html('Menu');
});
}
);
</script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#menubar {
width:100%;
background-color:#444;
color: #fff;
padding: 10px;
}
#button {
cursor:pointer;
}
#menu, #right {
display:inline;
}
#menu li a {
padding: 10px;
display: block;
color: white;
text-decoration: none;
}
#right {
width:100%;
background-color: #fff;
z-index: 5;
position: fixed;
left: 0px;
height: 100%;
-webkit-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
moz-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
o-box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#right p {
padding: 10px;
}
#menu {
float:left;
width: 350px;
height: 100%;
}
#menu li {
background-color:#444;
border-bottom: 1px solid #888;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
<li><a href="#">Menu Item 6</a></li>
<li><a href="#">Menu Item 7</a></li>
<li><a href="#">Menu Item 8</a></li>
<li><a href="#">Menu Item 9</a></li>
<li><a href="#">Menu Item 10</a></li>
<li><a href="#">Menu Item 11</a></li>
<li><a href="#">Menu Item 12</a></li>
</ul>
</div>
<div id="right">
<div id="menubar">
<div id="button">
Menu
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
</div>
</body>
</html>
Danke und LG
Blaubaer
verwendete ilch Version: 1.1 O
betroffene Homepage: jsfiddle.net/fh6p4/
