<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="javascript/menu-sticky.js"></script> -->
<label for="menu"> <!-- menu burger -->
<i class="icon-burger"></i>
</label>
<input type="checkbox" id="menu">
<nav id="navigation"> <!-- navigation general -->
<ul>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
</ul>
</nav>
<nav id="menu-responsive"> <!-- navigation pour le responsive -->
<ul>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
</ul>
</nav>
/* navigation general en sticky */
#navigation {
z-index: 1000;
width: 100%;
height: 50px;
background: transparent;
text-align: center;
line-height: 50px;}
#navigation ul {
display: flex;
display: flex;
display: flex;
display: flex;
justify-content: flex-end;
justify-content: flex-end;
background-color: seagreen;}
#navigation ul li a {
height: inherit;
padding: 0 15px;
display: inline-block;
transition: all 150ms ease;
transition: all 150ms ease;
transition: all 150ms ease;
transition: all 150ms ease;
line-height: inherit;
text-transform: uppercase;
font-family: 'Open Sans';
font-size: 16px;
color: #332222;
padding-top: 60px;}
#navigation li a i { font-size: 25px;} /* pour le picto accueil */
#navigation ul li a:hover {
border-bottom: 1px solid #efeefe;
color: #efeefe;}
#navigation.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #889f94;}
#navigation.fixed ul { justify-content: center;
justify-content: center;
justify-content: center;
justify-content: center; }
#navigation.fixed a { padding-top: 0;}
/* menu burger responsive */
header label, header input, #menu-responsive { display: none;}
/* pour le responsive */
@media (max-width:320px) {
/* menu*/
.main {width: 100%;}
#navigation { display: none; }
header label { display: block;
cursor: pointer;
width: 45px;
height: 45px;}
header label i { font-size: 35px;
color: #889f94;
padding: 10px;
position: fixed;
z-index: 1000;}
#menu:checked ~ #menu-responsive { display: block;}
$(document).ready(function () {
var $nav = $('#navigation'),
posTop = $nav.position().top;
$(window).scroll(function () {
var y = $(this).scrollTop();
if (y > posTop) { $nav.addClass('fixed'); }
else { $nav.removeClass('fixed'); }
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.