Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Menu vertical (HTML/CSS)

StayZz

Par StayZz
dans CMS & TEMPLATES

 Partager

Messages recommandés

StayZz

StayZz 8

Posté(e)
Posté(e)

Salut la commu !

J'espère que vous allez bien :)

 

Aujourd'hui, je vous partage un menu vertical en HTML/CSS que j'ai trouvé sur le web mais je l'ai remodifié un peu à mon goût.

Il peut être utilisé pour vos projets etc et il est très simple à modifier :)

 

Voici le code :

 

HTML :

  

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf_8">
	<title>Psyche</title>
	<link rel="stylesheet" href="style.css">
</head>

	<div class="menu-vertical">
		<div class="avatar"></div>
		<h3> Bienvenue Psyche </h3>

		<div class="menu"><a href="#">Accueil</a></div>
		<div class="menu"><a href="#">Rétro du jour</a></div>
		<div class="menu"><a href="#">L'équipe</a></div>
		<div class="menu"><a href="#">Paramètres</a></div>
		<div class="menu"><a href="#">Déconnexion</a></div>
	</div>


<body>


	</div>
</div>

</body>
</html>

CSS ( à glisser dans un fichier style.css dans le même dossier que l'index ) :

  

body{
	background-color: #ededed;
	margin:0;
	padding:0;
	font-family:sans-serif;
}

.menu-vertical{
	background-color:#fff;
	width:275px;
	position:fixed;
	top:0;
	bottom:0;
	box-shadow: 2px 2px 2px silver;
}

.menu-vertical .avatar{
	background-image: url(images/images.png);
	background-repeat: no-repeat ;
	background-position:center;
	width:128px;
	height:128px;
	margin:25px auto 5px auto;
}

.menu-vertical h3{
	text-align:center;
	color:#444;
	font-size:20px;
	margin-bottom:18px;
}

.menu-vertical .menu{
	background-color:#ededed;
	width:225px;
	padding:25px;
	margin-bottom:5px;
}

.menu-vertical .menu a{
	color:#e74c3c;
	text-decoration:none;
	font-size:16px;
}

 

A bientôt !

Pour avoir accès à cette image, merci de vous connecter.

:banane-f98: 

Voyou à votre service;

 

Lien à poster
Partager sur d’autres sites
  • 1 mois plus tard...
  • 3 semaines plus tard...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...