Please enable JavaScript.
Coggle requires JavaScript to display documents.
Navigation (Adding Navigation Links (1) make class nav (<div…
Navigation
Adding Navigation Links
1) make class nav
<div class="nav">
2) make navigation bars
<ul></ul>
3) create anchor tags
<li><a href="index.html">Home</a></li>
to link the page to itself
<a href="#">About</a>
Navigation Bar with Nested Selectors
horizontal orientation.
1) Specify list items in the unordered list in the nav div (rather than the whole list)
2) A nested selector is a selector inside of another selector.
.nav ul li{display:inline-block;}
See how li (list item) is nested inside of ul (an unordered list)?
3) Style
Background color
Letter-Spacing
text transform: uppercase
Navigation Bar: Display and Positioning
Fixed navigation bar
Fixed elements are like absolute, but they're defined relative to the browser window, so they stay in the specified position even when the user scrolls.
Stuck to the top of the page and visible even if we scroll down
position:fixed
width:100%
top:0;
Padding: top, right, bottom, left order
For example: Top. right, buttom: 10px 20px 10px;
All four paddings are 25px: padding 25px
Float
For your “home” link to appear on the left and the rest of your navigation links to appear on the right, take “home” out of the unordered list.
You can also style it differently (or replace it with a logo). It’s still part of the div with the class "nav", but you can now position it using margins and padding that apply only to your home link rather than the rest of your unordered list items. Use the nested selector .nav a to select the only link that's NOT part of an unordered list in the div. Because your .nav ul li a selector is much more specific, its styles will not be affected.
.nav ul li{float:right;}
Styling with Pseudo-Classes
he links turned a different color when you moved your mouse over them
Hover effect with pseudo-classes
1) create a pseudo class
2) make styling to pseudo class