LESSON-1-CSS-NAVIGATION-BARS.pptx

LESSON 1 – CSS NAVIGATION BARS What is a CSS Link? It is a connection from one web page to another web page. Using CSS, links can be styled in many different ways. CSS Links? Styling Links Links can be styled with any CSS property (example: color, font- family, background, etc.). Example 1: a...

LESSON 1 – CSS NAVIGATION BARS What is a CSS Link? It is a connection from one web page to another web page. Using CSS, links can be styled in many different ways. CSS Links? Styling Links Links can be styled with any CSS property (example: color, font- family, background, etc.). Example 1: a{ color: hotpink; } Example 1: Example 1 a{ color: hotpink; } Style a link with a color HOME CONTACT US In addition, links can be styled differently depending on what state they are in. The four links states are: a:link - a normal or unvisited link. a:visited - a link the user has visited. a:hover - a link when the user mouses over it. a:active - a link the moment it is clicked. Example 2: Example a:link { color: red;} a:visited { color: green;} a:hover {color: hotpink;} a:active {color: blue;} Styling a link depending on state HOME Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective. What is navigation bar? The purpose of a navigation bar is to help user to browse the website.A navigation bar is usually placed at the top of your website.  TWO WAYS IN DESIGNING A NAVIGATION BARS 1. Vertical Navigation Bar 2. Horizontal Navigation Bar Vertical Navigation Bar Having easy-to-use navigation is important for any web site. Navigation Bar = List of Links A navigation bar is basically a list of links, using the and tags and tag. Home News Contact About  EXAMPLE 1 Example 1 Home News Contact About Now let's remove the bullets and the margins and padding from the list: Example ul { list-style-type: none; margin: 0; padding: 0; }  EXAMPLE 2 In this example, we remove the bullets from the list, and its default padding and margin. Example 1 Home ul { News Contact list-style-type: none; About margin: 0; padding: 0; } Example explained: list-style-type: none; Removes the bullets. A navigation bar does not need list markers Set margin: 0; and padding: 0; to remove browser default settings. The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next lessons.  Example CSS explained: DESCRIPTION VALUES EXAMPLE PROPERTY list-style- Display the list item marker none,circle, disc, list-style-type:none; type square list-style-type: none; Removes the bullets. A navigation margin bararound The space does an not length, needpx,list% markers Margin:0 element’s border Set margin: 0; and padding: 0; to remove browser padding The space between an length, px, % Padding:2 default element’s settings. border and the element’s content background sets the background color of color name Color:blue; The code in the example above is the standard -color an element code used display in defines howboth the vertical, components are going to be block,and inline horizontal display:block navigation placedbars, on the webwhich page. you will learn more about in the next color sets thelessons. text color. color name color:green; CSS ExampleDESCRIPTION explained: VALUES EXAMPLE PROPERT Y list-style-type: text- none; used to add Removes decorative the bullets. none, line- text- A decoratio navigationeffects bartodoes the textnot needthrough, decoration:none; list markers n overline , Set margin: 0; and padding: 0; to remove browser underline default settings. width sets an element's px, % width:200px; width border specify the style, px, % border:4px; The code in the width, and example color of an above is the standard code used element's in both border vertical, and horizontal text-align used to set the center, left, text-align:center navigation bars,alignment horizontal which you willjustify of right, learn more about in the next lessons. a text position Position of text or fixed, static, position:fixed;  Vertical Navigation Bar To build a vertical navigation bar, you can style the elements inside the list, in addition to the code from the previous page:  VERTICAL NAVIGATION BAR WITH A GRAY BACKGROUND COLOR ACTIVITY NO.1 : Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them. ACTIVITY NO.1 li a:hover { background-color: blue; color: white; } ACTIVITY 1 ul { list-style-type: none; margin: 0; Vertical Navigation Bar padding: 0; width: 200px; Home background-color:orange; News } Contact About li a { display: block; color: white; padding: 8px 16px; text-decoration: none; } OUTPUT  Active/Current Navigation Link ACTIVITY NO.2: Add an "active" class to the current link to let the user know which page he/she is on: /style> Active & Current Navigation Link Vertical Navigation Bar In this example, we create an "active" class with a green background color and a white text. The class is added to the ul {list-style-type: none; margin: 0; "Home" link. padding: 0; width: 200px; background-color: orange;} Home News Contact li a { display:block; color: #000; About padding: 20px 46px text-decoration: none; }.active { background-color:green color:white;} li a:hover{background-color: blue; color: white;} ACTIVITY NO.3 : Add text-align:center to or to center the links. Add the border property to add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all elements, except for the last one: li { text-align: center; CENTER LINKS & ADD border-bottom: 1px solid blue;} BORDERS ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color:orange; border: 4px solid red;} Home li a { display: block; color:brown; News padding: 8px 16px; text-decoration: Contact none;} About.active { background-color:green; color: white;} a:hover{ background-color:yellow;color: white;} Full-height Fixed Vertical Navbar ACTIVITY NO.4 :Create a full-height, "sticky" side navigation: Home Full-height Fixed Vertical Navbar News Contact body {margin: 0;} About ul { list-style-type: none; margin: 0; Fixed Full-height Side Nav padding: 0;width: 25%; Try to scroll this area, and see how the sidenav sticks to the page Notice that this div element has a left margin of 25%. This is because the side navigation is background-color:orange; position: fixed; set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div. Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the height: 100%; overflow: auto;} sidenav is too long (for example if it has over 50 links inside of it). Some text.. Some text.. li a {display: block;color: brown; Some text.. padding: 8px 16px;text-decoration: none;} Some text...active {background-color:green;color: white;} Some text.. Some text.. a:hover{background-color:yellow;color: white;} Some text.. div{margin-left:25%; padding:1px 16px;height:1000px;} HORIZONTAL NAV BAR CSS Horizontal Navigation Bar The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page. Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Inline List Items One way to build a horizontal navigation bar is to specify the elements as inline, in addition to the "standard" code from the previous page: Example: li { display: inline; } EXAMPLE 1: INLINE LIST ITEMS EXAMPLE Home News none; Contact About li {display: inline;} Example explained: display: inline; - By default, elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line. Horizontal Navigation Bar Activity ACTIVITY NO.1: Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them: STYLES TO BE USED: li a { ul { display: block; list-style-type: none; color: white; margin: 0; text-align: center; padding: 0; padding: 14px 16px; overflow: hidden; text-decoration: none; background- } color: orange; } li a:hover { background- li { color: brown; float: left; } }  ACTIVITY 1: li { float: left; ACTIVITY } 1 li a { ul { display: block; color: white; list-style-type: none; text-align: center; padding: 14px margin: 0; padding: 0; 16px; overflow: hidden; text-decoration: none; background- } color:orange;  ACTIVITY 1: li a:hover { background-color:black;} Home News Contact