Menu 2014

by toubia95

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id="navbar" class="navbar  navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

<a class="brand" href="accueil/"><img src="http://www.geologia.fr/fileadmin/templates/tmpl-geologia2012/img/logo/menu-geologia.png"></a>

            <div class="nav-collapse">
                <ul class="nav pills">
                    <li class="active dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Visiteurs <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li><a href="#">S'inscrire à Géologia</a>

                            </li>
                            <li><a href="#">S'inscrire au Défi</a>

                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Préparer votre visite</a>

                            </li>
                        </ul>
                    </li>
                    <!-- <li class="active dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Visiteurs2 <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li class="dropdown-submenu"><a href="#">Le Salon</a>

                                <ul class="dropdown-menu">
                                    <li><a href="#"><span class="badge badge-important">S'inscrire à Géologia</span></a>
                                   ...

CSS

.navbar .brand {
    padding: 5px 20px;
}

/* BASICS */

.nav-list {
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}

.nav {
  list-style: none outside none;
  margin-bottom: 20px;
  margin-left: 0;
}

ul, ol {
  margin: 0 0 10px 25px;
  padding: 0;
}

.nav > li > a:hover, .nav > li > a:focus {
  background-color: #EEEEEE;
  text-decoration: none;
}

.nav-list > li > a, .nav-list .nav-header {
  margin-left: -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.affix {
  position: fixed;
}

/* SIDENAV BSDOCS */

.bs-docs-sidenav {
  background-color: #FFFFFF;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
  margin: 30px 0 0;
  padding: 0;
  width: 228px;
}

.bs-docs-sidenav.affix {
  top: 40px;
}

.bs-docs-sidenav > li:first-child > a {
  border-radius: 6px 6px 0 0;
}

.bs-docs-sidenav > li > a {
  border: 1px solid #E5E5E5;
  display: block;
  margin: 0 0 -1px;
  padding: 8px 14px;
}

.bs-docs-sidenav > li > ul {
  border: 1px solid #E5E5E5;
  display: block;
  margin: 0 0 -1px;
  padding: 8px 14px;
}

.nav-list > li > ul {
    padding : 0 5px 0 45px;
}





/*
http://jsfiddle.net/toubia95/fEF58/
http://www.geologia.fr/fileadmin/templates/tmpl-geologia2012/img/logo/menu-geologia.png
***********************************

Les manifestations
	La conférence grand public (°affiche)
	Les tables rondes
	La journée métiers (°affiche °flyer °guide)
		S'inscrire à Géologia => Site EventBrite
		Les exposants
	Le Défi !
		S'inscrire au Défi
		Lire le réglement		
Préparer votre visite (°guide)
	S'inscrire sur SEEKUBE => Site SEEKUBE Etudiants
	Le programme
	Comment venir
		=> Site Centre Prouvé
Notre association
	Historique
		Géologia 2013
		Géologia 2012
		Géologia 2011
		Géologia 2010
		Géologia 2009
	
*****************
Réserver un stand (°Termes et conditions de vente)
	-> Page de confirmation et mail de confirmation :
		1.Récapitulatif
		2.Rappel des papiers à renvoyer
		3.Inciter à l'inscription...