What's new

Closed Creating a simple Navigation Panel: A code guide for beginners!

Status
Not open for further replies.

PseudoPro

Addict
Joined
May 30, 2016
Posts
111
Reaction
55
Points
108
Konichiwa!
Gusto ko lang po ishare ng tutorial na ito. Medyo matagal na din po ako hindi nakapagpost ng thread at na-discontinue yung previous guide ko. Kung may mga tanong at kung medyo naguguluhan po sa tutorial, pasabi nalang po sa comment section. Arigathanks!


>> NAVIGATION BAR <<
Every website needs a navigation bar to navigate their way to different web pages. This allows you to interconnect different pages to further expand your website. Here is a simple and easy way to create a navigation bar.

There are two ways to start:
1.) Using a <div> and <a> method
2.) Using a LIST method.


THE <DIV> METHOD
Step 1: Open Notepad++ and start putting the basic HTML structure.
*You may use different code editor such as sublime or VS Code or even Notepad.
*META tag is optional.

HTML:
<!doctype html>
<html>
    <!--HEADING-->
    <head>
        <meta charset="utf-8">
        <title>myWebsite - Welcome to my Website</title>
    </head>
    <!--HEADING-->
    
    <!--BODY-->
    <body>
        <!--NAVIGATION PANEL-->
        
        <!--NAVIGATION PANEL-->
    </body>
    <!--BODY-->
</html>

Step 2: Within the body tag, input <div> with a class name of you choice. Here, I just put "NAV" as my class name.
HTML:
<!--BODY-->
    <body>
        <!--NAVIGATION PANEL-->
        <div class="NAV">
           
        </div>
        <!--NAVIGATION PANEL-->
    </body>
<!--BODY-->

Step 3: Create link and name them.
*The number of links you want to create as well as the names are entirely up to you.

HTML:
<!--BODY-->
    <body>
        <!--NAVIGATION PANEL-->
        <div class="NAV">
            <a href="#CONTACT">CONTACT</a>
            <a href="#ABOUT">ABOUT</a>
            <a href="#HOME">HOME</a>
            
            <p>MYWEBSITE</p>
        </div>
        <!--NAVIGATION PANEL-->
    </body>
<!--BODY-->

Step 4: Link your CSS file.using the LINK tag.
HTML:
<!--HEADING-->
    <head>
        <meta charset="utf-8">
        <title>myWebsite - Welcome to my Website</title>
        <link rel="stylesheet" type="text/css" href="LOCATION OF YOUR CSS FILE">
    </head>
<!--HEADING-->

Step 5: Once you link your css file onto your page, you are ready to design.
CSS:
/*CSS INDEX*/
body{
    margin: 2% 5%;
    (This means that the whole body has a margin of 2% on top and bottom, and 5% on left and right. This is optional for you to put.)
}
/*NAVIGATION CSS*/
.NAV{
    background-color: #A0A0A0;
    overflow: hidden; (It means that the excess parts of the <div> will not be shown)
}
.NAV a{
    float: right; (It means that you push all the <a> to the right)
    font-size: 16px;
    text-decoration: none;
    padding: 14px 15px; (The inner spacing)
    color: black;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    text-align: center;
}
.NAV a:hover (This means that when you point your mouse onto the <a> tags) {
    background-color: #61BBD9;
    font-style: italic;
    transition: 0.6s ease;
}
.NAV p{
    font-size: 16px;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    padding-left:  14px;
}
/*NAVIGATION CSS*/

Step 6: Assign the links into different web pages.
HTML:
<!--BODY-->
    <body>
        <!--NAVIGATION PANEL-->
        <div class="NAV">
            <a href="CONTACT.HTML">CONTACT</a>
            <a href="ABOUT.HTML">ABOUT</a>
            <a href="HOME.HTML">HOME</a>
            
            <p>MYWEBSITE</p>
        </div>
        <!--NAVIGATION PANEL-->
    </body>
<!--BODY-->

And you are done. If you have any questions, leave them in the comments below. I'll try to answer them as much as I could. If you are still having difficulties, don't worry cause you are not alone!
 
Not a bad tutorial. If you wanna have better browser compatibility and mobile responsive design without having to repeat all the boiler plate code, I suggest using a UI framework like Bootstrap. See it here You do not have permission to view the full content of this post. Log in or register now.
 
Status
Not open for further replies.

Similar threads

Back
Top