HTML
Код: Выделить всё
[img]design/logo-titol-prova-1.PNG[/img]
[url=#][/url]
[img]design/logo-titol-prova-1.PNG[/img]
[list]
[*][url=about]About[/url]
[*][url=surf-salina-cruz]Surf/Kitesurf[/url]
[*][url=mexico-surf-tour]The Tour[/url]
[*][url=surf-camp-lodging]Lodging[/url]
[*][url=testimonials]Testimonials[/url]
[*][url=book-now]Reserve Now[/url]
[/list]
Код: Выделить всё
/*Menu*/
.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}
.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}
.menu_bar {
display:none;
}
.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}
.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}
.menu nav ul li.first {
background:none;
}
.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}
.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.menu nav ul li a:active {
color:#71e1b0;
}
section {
padding:20px;
}
img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}
@media screen and (max-width:1100px){
img#logo{
max-width:300px;
margin-left: 10px;
}
.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}
.menu nav ul li a {
margin:10px 15px 0 15px;
}
.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}
@media screen and (max-width:800px){
img#logo{
display:none;
}
.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}
.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}
.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}
.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}
.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;
}
img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}
Код: Выделить всё
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
Код: Выделить всё
$(document).ready(function(){
$("#banner").css({"height":$(window).height() + "px"});
var flag = false;
var scroll;
$(window).scroll(function(){
scroll = $(window).scrollTop();
if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});
flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}
});
});
Подробнее здесь: https://stackoverflow.com/questions/754 ... -localhost
Мобильная версия