JSFiddle - React, Tailwind, and code Playground

by kerlutinoec

HTML

<title>Titre</title>

<body ontouchstart="">
<header>
	<nav id="menu">
		<div class="conteneur_menu">
			<div id="menumobile">
				<a href="#nogo" 
					onclick="toggle('.pagemenu');toggle('.rubrique')">
					&equiv;
				</a>				
			</div>
			<div class="pagemenu">
				<a href="#haut" 
				onclick="masquer('#real');masquer('#infos1');masquer('#infos2');
						masquer('#infos3');masquer('#infos4');masquer('#merci')
						">
				A propos
				</a>
			</div>
			<div class="pagemenu">
				<a href="#real" onclick="montrer('#real')">
				RĂ©alisations
				</a>
			</div>
			<div class="rubrique">
				<a href="#nogo">Informations</a>
				<div class="sousmenu">
					<div class="pagesousmenu">
						<a href="#infos1" onclick="montrer('#infos1')">
						Infos1
						</a>
					</div>
					<div class="pagesousmenu">
						<a href="#infos2" onclick="montrer('#infos2')">
						Infos2
						</a>
					</div>
					<div class="pagesousmenu">
						<a href="#infos3" onclick="montrer('#infos3')">
						Infos3
						</a>
					</div>
					<div class="pagesousmenu">
						<a href="#infos4" onclick="montrer('#infos4')">
						Infos4
						</a>
					</div>
				</div>
			</div>
			<div class="pagemenu">
				<a href="#contact">Contacts</a>
			</div>
		</div>
	</nav>
</header>

<div>
<br><br><br><br>Contenu
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</body>
</html>

CSS

body { background-color: #000; }
	body, html {
	 	color: #FFF;
	 	margin: 0px;
		height: 100%; 
		width: 100%;
		font-family: Helvetica, Arial, sans-serif;
		text-align: center;
		-webkit-text-size-adjust: 100%;
		-webkit-overflow-scrolling: touch;
		}
	a:link, a:visited, a:active { color: #FFF; }
	header, nav, section, footer { display: block; }

	.conteneur_menu{
		border-spacing:0;
		position:fixed;
		top:0;
		width:100%;
		display:table;
		background-color:#676767;
		background-color:hsla(0, 0%, 60%, 0.80);
		height:46px;
		box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
		z-index:2;
		}
	.conteneur_menu a {
		text-decoration:none;
		display:table-cell;
		vertical-align:middle;
		height:46px;
		padding:0;
		text-align:center;
		transition:all 0.25s ease;
		}
	.pagemenu, .rubrique, #menumobile {
		float:left;
		position:relative;
		width:24%;
		text-align:center;
		display:table;
		font-size:1.125em;
		}
	#menumobile { display:none; font-size:3.3em; }
	.pagemenu, .rubrique, #menumobile > a { color:#FFF; text-decoration:none }
	.rubrique:hover .sousmenu { opacity:1; visibility:visible; top:46px; }
	.sousmenu {
		left:0;
		opacity:0;
		position:absolute;
		top:0;
		visibility:hidden;
		z-index:2;
		width:100%;
		background-color:#676767;
		box-shadow:1px 1px 8px #333333;
		}
	.pagesousmenu > a  { color:#FFF; text-decoration:none }
	.pagesousmenu { border-top:1px solid #797979; border-bottom:1px solid #000 }
	.pagesousmenu { width:100%; text-align:center; display:table }
@media screen and (min-device-width:1024px) {
	.sousmenu { transition:all 0.25s ease }
	.pagemenu:hover > a {
		color:#FFF;
		font-weight:bold;
		text-decoration:none;
		background-color:#676767;
		background-color:hsla(0, 0%, 60%, 0);
		font-size:1.125em;
		}
	.rubrique:hover > a {
		color:#FFF;
		font-weight:bold;
		text-decoration:none;
		background-color:#676767;
		background-color:hsla(0, 0%, 60%, 0);
		font-size:1.125em;
		}
	.sousmenu a:hover { background-color:#474747 }
}

@media screen and...

JavaScript

$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");
	$('html, body').animate({
		scrollTop:$(the_id).offset().top -49
	}, 'slow');  
	return false;  
});

function montrer(id) {
$(id).slideDown( "slow" );
}

function masquer(id) {
$(id).slideUp( "slow" );
}

function toggle(id) {
$(id).slideToggle( "slow" );
}