File "menu02.html"

Full Path: /home/analogde/www/MDPH/Work/menu02.html
File size: 2.86 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <!--
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<style>



nav {
	position: relative;
	//margin: 50px;
	//width: 60px;
    //background: 
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
  /* Sub Menu */
}
nav ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
}
nav ul li a:hover {
	background: #1d4f71;
	color: #fff;
}
nav ul li a .fa {
	width: 16px;
	text-align: center;
	margin-right: 5px;
	float:right;
}
nav ul ul {
	background: rgba(0, 0, 0, 0.2);
}
nav ul li ul li a {
	
	border-left: 4px solid transparent;
	padding: 10px 20px;
}

nav ul li ul li a:hover {
	border-left: 4px solid  green; //#3498db;
}


.pipo {
  background : #D6DBDF ;
}

.un {
  background : #26DBDF ;
}

.deux {
  background : #DDF ;
}

.trois {
  background : #16DB ;
}

#divheight {
  height: 120px;
}

.yyy {
  height: 120px;
}

.zzz {
  height: 350px;
}



</style>



		
	
		<div class="container"> 
		
			<div class="row yyy"> 
				<div class="pipo col-md-3">
				aaa
				</div > 
				
				<div class="un col-md-9">
				Zoulou
				</div > 
			</div >
		
		
			<div class="row zzz"> 
				<div class="deux col-md-3">
				ffff
				</div > 
				
				<div class="trois col-md-9">
				plouf
				</div > 
			</div >
			
		</div>

	

<script>
      $('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
	$(this).parent(".sub-menu").children("ul").slideToggle("100");
	$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
 </script>

</body>
</html>