File "menu01.html"
Full Path: /home/analogde/www/MDPH/Work/menu01.html
File size: 6.68 KB
MIME-type: text/html
Charset: utf-8
<!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;
}
.xxxx {
background : #D6DBDF ;
}
</style>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3 bg-info">
<nav class='xxxx '>
<ul>
<li><a href='#profile'>Profile</a></li>
<li><a href='#message'>Messages</a></li>
<li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right '></div></a>
<ul>
<li><a class="fa fa-camera" href='#settings'> tutu</a></li>
<li><a class="fa fa-camera" href='#settings'><span style="padding-left: 10px;">tutu</span></a></li>
<li><a href='#settings' class="fa fa-camera" ><span style="padding-left: 10px;">Cretin</span></a></li>
<!--
<li><i class="fa fa-bookmark"></i> Book Mark</li>
<li><i class="fa fa-rocket"></i> Lets Fly</li>
<li><i class="fa fa-gears"></i> Settings</li>
<li><i class="fa fa-warning"></i> Error Messages
-->
<!-- https://jsfiddle.net/WyN7w/ -->
<li><a href='#settings'>Profile</a></li>
<li><a href='#settings'>Secruity & Privacy</a></li>
<li><a href='#settings'>Password</a></li>
<li><a href='#settings'>Notification</a></li>
</ul>
</li>
<li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
<ul>
<li><a href='#settings'>FAQ's</a></li>
<li><a href='#settings'>Submit a Ticket</a></li>
<li><a href='#settings'>Network Status</a></li>
</ul>
</li>
<li><a href='#message'>Logout</a></li>
</ul>
</nav>
</div>
<div class="col-md-9 bg-warning">
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. </p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium. </p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="container">
<div class="row">
<div class="col-md bg-info">1er élément</div>
<div class="col-md-6 bg-warning">2è élément</div>
<div class="col-md bg-success">3è élément</div>
</div>
</div>
-->
<!--
<div class="container-fluid h-100 d-flex flex-column">
<div class="row" style="background-color: grey;">
<br>
</div>
<div class="row h-100" style="background-color: yellow;">
<br>
</div>
<div class="row" style="background-color: green;">
<br>
</div>
</div>
<!--
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4 bg-primary"> First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
-->
<!--
<div class="container">
<div class="row">
<div class="col-2 bg-info">1er élément</div>
<div class="col-4 bg-warning">2è élément</div>
<div class="col-6 bg-success">3è élément</div>
</div>
</div>
-->
<!--
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-3 col-xs-1" id=”sidebar”>
</div>
<main class=”col-md-9 col-xs-11">
</main>
</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>