Данное меню можно поместить куда вам угодно в середину или даже в конец сайта суть в том что когда при прокрутки страницы вы дойдёте до данного меню оно станет фиксированное. Это можно посмотреть в демо на моём сайте.
Код
<script type="text/javascript">
var secondaryNav = $('.cd-secondary-nav'),
secondaryNavTopPosition = secondaryNav.offset().top;
$(window).on('scroll', function(){
if($(window).scrollTop() > secondaryNavTopPosition ) {
secondaryNav.addClass('is-fixed');
setTimeout(function() {
secondaryNav.addClass('animate-children');
$('#cd-logo').addClass('slide-in');
$('.cd-btn').addClass('slide-in');
}, 50);
} else {
secondaryNav.removeClass('is-fixed');
setTimeout(function() {
secondaryNav.removeClass('animate-children');
$('#cd-logo').removeClass('slide-in');
$('.cd-btn').removeClass('slide-in');
}, 50);
}
});
</script>
Код
/* -------Навигация второго уровня------------- */
.ots{
margin-bottom:40px;
}
.menu_bg{ background-color: rgba(3, 13, 24, 0.96);
height:10px;
margin-bottom: -12px;
}
.cd-secondary-nav {
background-color: rgba(3, 13, 24, 0.96);
position: relative;
z-index: 3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-secondary-nav ul {
/* mobile first - secondary navigation hidden by default, triggered by tap/click on .cd-secondary-nav-trigger*/
position: fixed;
width: 90%;
max-width: 400px;
right: 5%;
bottom: 20px;
border-radius: 0.25em;
background: rgba(3, 13, 24, 0.96);
visibility: hidden;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
transition: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
-moz-transition: -moz-transform 0.3s, visibility 0s 0s;
transition: transform 0.3s, visibility 0s 0s;
}
.cd-secondary-nav li a {
display: block;
padding: 1.6em;
border-bottom: 1px solid #092645;
color: #f0eee1;
}
.cd-secondary-nav li:last-child a {
border-bottom: none;
}
.cd-secondary-navcd-secondary-nav {
z-index: 1;
background-color: rgba(3, 13, 24, 0.96);
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.cd-secondary-nav nav, .cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
height: 100%;
}
.cd-secondary-nav ul {
/* reset navigation values */
position: static;
width: auto;
max-width: 100%;
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
text-align: center;
background-color: transparent;
}
.cd-secondary-nav li {
display: inline-block;
margin-left: -4px;
}
.cd-secondary-nav li a {
position: relative;
text-align: center;
display: block;
padding: 0px 40px 0 40px;
border-bottom: none;
-webkit-transition: padding 0.2s;
-moz-transition: padding 0.2s;
transition: padding 0.2s;
}
.cd-secondary-nav li a b {
text-transform: uppercase;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 700;
color: rgba(240, 238, 225, 0.3);
}
.cd-secondary-nav li a:hover b, .cd-secondary-nav li a.active b {
color: #f0eee1;
}
.cd-secondary-nav li:nth-child(1) a span {
background-position: 0 0;
}
.cd-secondary-nav li:nth-child(2) a span {
background-position: -40px 0;
}
.cd-secondary-nav li:nth-child(3) a span {
background-position: -80px 0;
}
.cd-secondary-nav li:nth-child(4) a span {
background-position: -120px 0;
}
.cd-secondary-nav li:nth-child(5) a span {
background-position: -160px 0;
}
.cd-secondary-nav.is-fixed {
/* on Firefox CSS transition/animation fails when parent element changes position attribute*/
/* so we defined to diffent classes: .is-fixed to change the position value and .is-animated to change childrens' attributes (padding and opacity)*/
position: fixed;
left: 0;
top: 0;
height: 40px;
width: 100%;
}
.cd-secondary-nav.animate-children {
/* on Firefox CSS transition/animation fails when parent element changes position attribute*/
/* so we defined to diffent classes: .is-fixed to change the position value and .is-animated to change childrens' attributes (padding and opacity)*/
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cd-secondary-nav.animate-children li a {
padding: 0px 30px 0 30px;
}
.cd-secondary-nav.animate-children li a span {
opacity: 0;
}
/* -------Конец-Навигация второго уровня------------- */