TUTORIAL: How to create Scrolling Left Side Vertical Navigation Bar Inside a Container Using CSS (Cascading Style Sheets)

afterglow (59)in #utopian-io • 6 years ago (edited)

Repository

https://github.com/w3c/csswg-drafts

What Will I Learn?

You will learn to use Cascading Style Sheets (CSS) in creating a scrolling vertical navigation bar inside a container
You will learn to learn to format the structure of a tag. In this case the <a> tag that defines a hyperlink.
You will learn to format the structure of a container. In this case the <div> tag that defines a container.
You will learn to change the behavior of a hyperlink <a> whenever a user hover a mouse above it.

Requirements

You will need a Text editor for this tutorial. You can use Notepad (Windows), TextEdit (Mac), or any of your favorite text editor.
A browser such as Google Chrome, Firefox, Edge, Safari to view the outcome of your work as you progress into this tutorial

Difficulty

Basic

Tutorial Contents

This code uses CSS in creating a "Scrolling Left Side Navigation Bar". It uses CSS selectors such as "Class Selector" and "Element Selector" in formatting the structure and behavior of the navigation bar.

Creating HTML file:

For beginners: In case you forgot, you need to create first a html file and save it in any file name that you want then type the codes below into your html file...

<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Creating the container:

Type the codes <div></div> inside the <body> tag of your html file (illustration below).

<body>

<div></div>

</body>

Or you can type it like this...

<body>

<div>
</div>

</body>

The container <div> is where we are going to put the hyperlinks.

Adding contents on the container, in this case, the hyperlinks <a>Menu</a>. You can add more than I did here so that it will consume more than the vertical space of your screen. (See illustration below).

<body>

<div>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
<a>Menu</a>
</div

</body>

Formatting the structure and behavior of hyperlinks using CSS (1):

Put this code <style type="text/css"></style>inside the <head> tags of your HTML file. (See illustration below).

<head>

<style type="text/css"></style>

</head>

Or you can type it like this...

<head>

<style type="text/css">
    
</style>

</head>

The CSS tag <style> defines the structure and behavior of html elements, in this case the <a> tag and <div> tag.

Formatting the structure and behavior of hyperlinks CSS (2):

Put the codes below inside the <style> tag. (See illustration below).

<style type="text/css">

a {
  font-family: helvetica;
}

a:hover {
    background-color: #4CAF50;
    color: white;
    text-underline-position: none;
}

.leftNavMainContainer {
  background: powderblue;
  padding: 0px 16px 0px 0px;
  overflow: auto;
  position: relative;
  height: 100%;
  width: 13%;
  float: left;
}

.leftNavLinks {
  padding: 7px 116px 7px 16px;
  color: black;
}

</style>

Here's how the above codes above works:

The CSS element selector a formats the fonts of all the hyperlinks.
The CSS element selector a:hover formats the structure and behavior of a menu (hyperlinks) when hovered by a mouse
The CSS class selector .leftNavMainContainer formats the structure and behavior of the container <div>
The CSS class selector .leftNavLinks formats the structure of each menu (hyperlinks)
the code overflow: auto; will automatically put a scroll bar in the container once the content (hyperlinks) exceeds the size of your screen.
the code height and width defines the height and width of the container respectively.
the code text-underline-position: none; will remove any underline on the hyperlinks.
the code position: relative; will set the position of the container relative to the previous element on your html. I included this code so that you can safely copy paste the codes in this tutorial in any html or php document without messing up the structure of your html or php.
the code float: left; will force the container to align at the bottom of any html element. I included this code so that you can safely copy paste the codes in this tutorial in any html and php document without messing up the structure of your html or php document.
the code padding: generates space around an element, in this case the <a> and <div>. This is useful if you want to put considerable space between the hyperlinks just like what I did on this tutorial.
the code text-underline-position: none; removes all the underline on all the hyperlinks.

Next, let's apply the CSS class selectors to the container and to the hyperlinks. Go back to the container <div> and and its contents, in this case the hyperlinks <a>Menu</a> that you have done in the previous step.

Put the class selector .leftNavMainContainer inside the <div> tag. (See illustration below)

<div class="leftNavMainContainer">

Put the selector .leftNavLinks inside of all the <a> tags. (See illustration below)

<a class="leftNavLinks">Menu</a>

Finally, we are done applying the CSS to the container and to its contents (hyperlinks). We have to add some codes in order for the menus (hyperlinks) to align vertically. Without these codes your menus or hyperlinks are just going to be stacked horizontally.

Put these style sheets code style="float: left; clear: left; inside of all the <a> tags. (See illustration below)

<a class="leftNavLinks" style="float: left; clear: left;">Menu</a>

Last but not the least, if the code text-underline-position: none; is not working in removing the underline of all the hyperlinks. Put the code below inside the <head> tag. (See illustration below).

<head>

<STYLE TYPE="text/css">(html comment removed:  a:link, a:visited, a:active {text-decoration:none} )</STYLE>

</head>

The code above overrides the code text-underline-position: none;. This code removes all the underline on all of the hyperlinks if text-underline-position: none; is not working.

It is done, save your file then try to access it using your favorite browser. It should look like this one now. (See screenshot below).
left nav.png

Proof of Work Done

https://github.com/afterglow14/css-scrolling-vertical-navigation-bar

#tutorials #busy #technology #philippines

6 years ago in #utopian-io by afterglow (59)

$0.84

Sort:

Trending

[-]

steemitboard (66) 6 years ago

Congratulations @afterglow! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the total payout received

_{Click on the badge to view your Board of Honor.}
_{If you no longer want to receive notifications, reply to this comment with the word STOP}

To support your work, I also upvoted your post!

Do not miss the last post from @steemitboard:
SteemitBoard World Cup Contest - Russia vs Croatia

Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes

You can upvote this notification to to help all Steemit users. Learn why here!

$0.00

1 vote

[-]

minnowsupport (70) 6 years ago

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by afterglow from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

$0.00

[-]

portugalcoin (72) 6 years ago (edited)

Thank you for your contribution.
This moderation might not be considered due to the below:

There is a lot of information on the internet on this subject.
Technique quite easy and that already used for a long time, doesn't bring knowledge to the open source community.

Try to come up with new and more innovative/useful ways to utilize Cascading Style Sheets (CSS).

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$0.00

STEEM 0.18

TRX 0.16

JST 0.031

BTC 62768.63

ETH 2678.95

USDT 1.00

SBD 2.56

TUTORIAL: How to create Scrolling Left Side Vertical Navigation Bar Inside a Container Using CSS (Cascading Style Sheets)

Repository

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Proof of Work Done

Coin Marketplace