Kód: Vybrať všetko
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="all_content">
<div id="wrap">
<div class="menu">
<a href="#aboutme">About me </a>
<a href="#">Skills </a>
<a href="#">What I do </a>
<a href="#">Contact me </a>
</div>
<div class="imagebg"></div>
<div id="block">
<div class="top">
<img src="image/logo_black.png" width="13%" alt="logo"/>
<p class="name">Pavol Gašpár</p>
<p class="multimedia">multimedia designer</p>
<div class="social_icon">
<a class="facebook" href="" target="_blank" ></a>
<a class="linkedin" href="" target="_blank" ></a>
<a class="skype" href="" target="_blank" ></a>
<a class="instagram" href="" target="_blank" ></a>
<a class="pinterest" href="" target="_blank" ></a>
</div>
<a class="btn_aboutme" href="#aboutme"></a>
</div>
</div>
<div id="aboutme">
<div class="top">
<img src="image/logo_black.png" width="13%"/>
<p class="name">Pavol Gašpár</p>
<p class="multimedia">multimedia designer</p>
<div class="social_icon">
<a class="facebook" href="" target="_blank" ></a>
<a class="linkedin" href="" target="_blank" ></a>
<a class="skype" href="" target="_blank" ></a>
<a class="instagram" href="" target="_blank" ></a>
<a class="pinterest" href="" target="_blank" ></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Kód: Vybrať všetko
// JavaScript Document
<!-- scrolling btn -->
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing');
<!-- fixed menu -->
var mn = $(".menu");
$(window).scroll(function () {
if( $(this).scrollTop() > 150 ) {
mn.addClass("menu-fixed");
} else {
mn.removeClass("menu-fixed");
}
});Kód: Vybrať všetko
html, body {
margin:0;
padding:0;
height:100%;
font-family:"raleway-regular";
color:#262626;
font-size:16px;
min-height:800px;
}
.menu{
width:100%;
height:auto;
float:left;
margin-left:60%;
position:relative;
z-index:999;
box-sizing:border-box;
}
.menu a {
display:inline-block;
text-decoration:none;
padding:2% 1% ;
color:#262626;
float:left;
}
.menu a:hover {
display:inline-block;
text-decoration:none;
padding:2% 1% ;
color:#056c98;
font-weight:bold;
float:left;
}
.menu-fixed {
position: fixed;
}
