Creating Navbar Using StickyNavbar.js-master

A. What Will I Learn

What is a navbar and what is the navbar benefit.
How to use thestickyNavbar.js-master function
Understand about the code needed to use the a stickyNavbar.js-master function

B. Requirements

Applications for web editing programming like Notpad, Notpad++, etc.
You already superfish-master function.
Get function click her

C. Difficulty

Basic

D. Tutorial Contents

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>

3. Explanation of the code


<link href="style.css" rel="stylesheet" type="text/css">

This code is useful for calling the 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>

the code 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 class
activeClass: "active", To add the class function which will be navbar
sectionSelector: "scrollto", Connecting the navbar class with the link class
animDuration: 350, Set the duration of movement
startAt: 0, To determine the beginning of the movement
easing: "swing", Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
animateCSS: true, AnimateCSS effect on/off
animateCSSRepeat: false, Repeat animation everytime user scrolls
cssAnimation: "fadeInDown", AnimateCSS class that will be added to selector
jqueryEffects: false,To determine jQuery animation on/off
jqueryAnim: "slideDown", jQuery animation type: fadeIn, show or slideDown
selector: "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 mobileWidth
mobileWidth: 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 mode
unstickyModeClass: "unsticky" Class that will be applied to 'this' in non-sticky mode

4.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.

E. Curriculum

To know more about StickyNavbar.js-master you can visit:
To demo of this tutorial you can check stickyNavbar.js
function StickyNavbar.js-master github

Posted on Utopian.io - Rewarding Open Source Contributors

Sort Order:

Trending

[-]

utopian-io (71) · 7 years ago

Hey @andysupriady I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.00