change navbar in view mobile

list.html

@@ -39,23 +39,18 @@
 		<div><a class="bulbe" id="top-link" href="#top" title="Haut de page"></a></div>
 		<div  class="row">
 			<header id="top" class="twelvecol">
+				<nav class="navbar right">
+					<ul>
+						<li class="current"><a href="index.php">Menu</a></li>
+						<li><a href="index.php?mode=links">Liens</a></li>
+						<li><a href="index.php?mode=comments">Derniers commentaires</a></li>
+						<li><a href="?random">Un article au hasard !</a></li>
+					</ul>
+				</nav>
 				<div id="top_text">
 					<h1><a class="bulbe" href="{racine_du_site}" title="Revenir à l'accueil de {blog_nom}">{blog_nom}</a></h1>
 					<h2>{blog_description}</h2>
 				</div>
-				<nav id="topmenu">
-					<form id="tabletmenu" action="#" method="post">
-						<select>
-							<option value="">Navigation</option>
-							<option value="index.php">Accueil</option>
-							<option value="index.php?mode=links">Liens</option>
-							<option value="index.php?mode=comments">Derniers commentaires</option>
-							<option value="?random">Un article au hasard !</option>
-							<option value="rss.php">Fil Rss du Blog</option>
-							<option value="rss.php?full">Fil Rss complet du Blog</option>
-						</select>
-					</form>
-				</nav>
 			</header>
 		</div>
 

style.css

@@ -109,7 +109,7 @@ h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color:
 #top_text h2 {margin-top: -1em;font-size:1.6em; font-style: italic; text-align: right;text-shadow: 1px 1px 2px #aaa; padding-right:10px;}
 #top-link{ display:none; position: fixed; bottom: 5px; right: 5px; opacity: 1; cursor: pointer;}
 a#top-link {background: url(images/up.png) no-repeat 0 0; height:48px; width:48px;}
-#topmenu {display: none;}
+.navbar {display: none;}
 /* SIDEBAR */
 #sidebar {}
 #sidebar h3 { font-size:1.3em;}
@@ -129,9 +129,9 @@ a#top-link {background: url(images/up.png) no-repeat 0 0; height:48px; width:48p
 .encart_lastcom li a {font-size: .9em; text-decoration:none; font-style:italic;}
 /* search form */
 #search {margin-bottom: 20px;border: 1px solid gray;border-radius: 6px;-moz-border-radius: 6px;-webkit-border: 6px;box-shadow: 1px 1px 2px silver;	width: 237px;}
-#search input { margin-bottom: 0; display: inline-block;}
+#search input { margin-bottom: 0; display: inline-block; padding:3px;}
 #q {padding: 2px 0; padding-left:5px;box-shadow: none;border-radius: 6px;-moz-border-radius: 6px;-webkit-border: 6px;border-width: 0;text-align: left;width: 135px;}
-#input-rechercher { /* submit*/	width: 90px; font-size:.9em;}
+#input-rechercher { /* submit*/width: 90px; font-size:.9em;}
 /* Calendar */
 #calendrier {display: block;border: none;}
 #calendrier caption {font-size: 1.3em;padding: 4px;font-weight: bold;}
@@ -303,9 +303,29 @@ div.orbit, div.orbit-wrapper { width: 100% !important; }
 @media only screen and (min-width: 480px) and (max-width: 767px) {
 	#top_text h1  {font-size: 2em;}
 	#top_text h2 {font-size: 1em;}
-	#topmenu { display: inline-block;*display: inline; width: 80%;}
-	#topmenu form {margin-bottom: 0;}
-	#tabletmenu select {font-size: 1.2em; padding:5px;margin-bottom: 0;}
+	/* Navbar */
+	.navbar {display: block; position: relative;min-height: 40px; margin-top: -2em;}	
+	.navbar ul {
+		min-width: 180px;
+		padding: 5px 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: solid 1px #e0e0e0;
+		background: #fff url(images/icon-menu.png) no-repeat 8px 11px;
+		border-radius: 5px;
+		line-height: 1.8em;
+	}
+	.navbar li {display: none;margin: 0;}
+	.navbar .current {display: block;}
+	.navbar a {display: block;padding: 0 15px 0 32px;text-align: left; text-decoration: none; font-size: 1.2em;}
+	.navbar .current a {background: none;color: #666;}
+	.navbar ul:hover {background-image: none;}
+	.navbar li:hover {background: url(images/icon-check.png) no-repeat 10px 7px;}
+	.navbar.center ul {left: 50%;margin-left: -90px;}
+	.navbar ul:hover li {display: block;margin: 0 0 5px;}
+	.navbar.right ul {left: auto;right: .5em;}
+
 }
 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
 @media only screen and (max-width: 479px) {
@@ -314,9 +334,6 @@ div.orbit, div.orbit-wrapper { width: 100% !important; }
 	header#top { margin-top: 0;}
 	#top_text h1 {font-size: 1.6em;line-height: 2em;}
 	#top_text h2 {display:none;}
-	#topmenu {display: inline-block;*display: inline; width: 80%;}
-	#topmenu form {margin-bottom: 0;}
-	#tabletmenu select {font-size: 1.2em; padding:5px;margin-bottom: 0;}
 	.pm {display:none;}
 }
 /* Print Styles */