1.What is a navbar
Navbar or Navigation bar is a navigation tool in the form of frames and contains several menus with their usefulness. The functions that exist in the Navbar can help us on a web. Navbar on a web is very useful for visitors in knowing or looking for existing data on a web, here are some elements that are very suitable place on the navbar.
Logo
Logo can be said as the identity of a web, and almost all web have different logo different, A logo usually will be placed at the top of a web, therefore nafbar is one of the right location to put of the logo.
Menu
Menu is how much the contents of a web that are grouped based on categories or labels. almost all the web put the menu on the top of the web, therefore the menu is very suitable to be placed on the navbar
Search box
In a web search box is needed, this is because with the search box visitors will easily do a search about the contents of the web you want to search.
News walk or contact us.
News is running and contact me Since it is usually located on top of a web, then the navbar is very suitable to be a place to write our walking messages or contacts.
2.StickyNavbar.js-master
StickyNavbar.js-master is a navbar that is locked in place so it does not go away when the user scrolls the mouse down the page, in other words it can be accessed easily as it is always visible.
Most web designers will agree that the navigation menu is one of the most important components of a website. However, it is not always easy to use or access it. In general, the user must scroll the mouse back to the top of the website to access the navigation menu.
Many popular websites add this menu navigation function to keep the menus or logos visible at the top even though people have been scrolling down. When the user scrolls the mouse down the page and the top of the navigation menu sticks and remains visible. This intends to make it easier for web users and does not have to re-move the mouse to the top to explore the rest of the page. the sticky navbar is built by combining jquery and css which are then transcribed in an html function.
One way to create sticky navbar menu is to use the function of stickyNavbar.js-master, stickyNavbar.js-master function is a combined function of css and java script which will be in united daam html function.
As an example I will make the stickyNavbar.js-master function which in the stickyNavbar.js-master function there is css and javascript function, so we actually only need to build one htm function to combine css and javascript, but to make the screen look more dynamic we live create a style.css function.
syle.css
Style.css function is fung css that we created to make the sticky navbar look more interesting, sticky navbar view is very influential from the style.css result that we make.
* Style the navbar */
/* Navbar links */
#nav {
overflow: hidden;
background-color: #333;
}
#home{
height:50%;
background-color:#FFD700;
}
#about{
height:50%;
background-color:#E9967A;
}
#services{
height:50%;
background-color:#9932CC;
}
#contact{
height:50%;
background-color:#E9897A;
}
index.html
To create a sticky navbar we have to create index.html file, this index.html file is used to combine css function and java script function, besides html file also works for media or place where we write that will appear in browser screen. Examples of index.html files needed to write stickyNavbar.js-master are as follows.
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="stickyNavbar.js-master/jquery.stickyNavbar.min.js"></script>
</head>
<body>
<div id="header" class="header">
<nav id="nav">
<a class="active"href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</div>
<div id="home" class="scrollto">
<h1> <center > home </center> </h1>
</div>
<div id="about" class="scrollto" high=1200px;>
<h1> <center > about </center> </h1>
</div>
<div id="services" class="scrollto">
<h1> <center > Services</center> </h1>
</div>
<div id="contact" class="scrollto">
<h1> <center > Contact </center> </h1>
</div>
<script>
$(function () {
$('.header').stickyNavbar({
activeClass: "active",
sectionSelector: "scrollto",
animDuration: 350,
startAt: 0,
easing: "swing",
animateCSS: true,
animateCSSRepeat: false,
cssAnimation: "fadeInDown",
jqueryEffects: false,
jqueryAnim: "slideDown",
selector: "a",
mobile: false,
mobileWidth: 480,
zindex: 9999,
stickyModeClass: "sticky",
unstickyModeClass: "unsticky"
});
});
</script>
</body>
<html>
<link href="style.css" rel="stylesheet" type="text/css">
style.css function, this function is invoked through using the code link and redirecting it where the style.css function is stored, this code is usually placed inside the < head > function. The functionality of the function is to adjust the display of the navbar.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="stickyNavbar.js-master/jquery.stickyNavbar.min.js"></script>
script aims to call the java script function needed to create the navbar using stickyNavbar.js-master, the java script function aims to make navbar movements and also to keep the navbar above when the screen is scrolled down.
<script>.... </script> This code aims to create a javascript function that will be applied to the navbar; as for the falansi explanation of the existing code in the function is as follows.
$(function () { commencement of functions$('.header').stickyNavbar({ To declare that the navbar movement will be placed in the header classactiveClass: "active", To add the class function which will be navbarsectionSelector: "scrollto", Connecting the navbar class with the link classanimDuration: 350, Set the duration of movementstartAt: 0, To determine the beginning of the movementeasing: "swing", Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easinganimateCSS: true, AnimateCSS effect on/offanimateCSSRepeat: false, Repeat animation everytime user scrollscssAnimation: "fadeInDown", AnimateCSS class that will be added to selectorjqueryEffects: false,To determine jQuery animation on/offjqueryAnim: "slideDown", jQuery animation type: fadeIn, show or slideDownselector: "a", Selector to which activeClass will be added, either "a" or "li"mobile: false, If false, nav will not stick under viewport width of 480px (default) or user defined mobileWidthmobileWidth: 480, The viewport width (without scrollbar) under which stickyNavbar will not be applied (due user usability on mobile)zindex: 9999, The zindex value to apply to the element: default 9999, other option is "auto"stickyModeClass: "sticky", Class that will be applied to 'this' in sticky modeunstickyModeClass: "unsticky" Class that will be applied to 'this' in non-sticky mode4.Running StickyNavbar.js-master
After the style.css and index.html pages in a single file with the StickyNavbar.js-master function can be accessed using a web browser. Users will not see the script code run by web brrowaer, users will not see the menu name and web display according to the code we write in style.css and index.html.
StickyNavbar.js-master can also redirect the link menu without having to replace the screen and also the navbar will remain visible above the scrolling screen down. Display function can be seen in this picture.