We use only Css and Html codes to create our menu.
First you must create a HTML file on your computer.Let’s see how to do it .
Open notepad>Save as>For File name:index.html ,For file Type :All. then save it.
Now you created a html file on your computer.
Then copy and paste bellow code to your notepad.
-------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
a:link{color:white;background-color:blue;text-
decoration:none}
a:hover{color:blue;background-color:white;text-
decoration:underline}
#nav{list-style-type:none;display:block;padding:0px;padding-right:16px;margin:1px;text-align:right;background-color:blue;color:white;}
</style>
</head>
<body>
<div id=”nav”>
<a href="about.html" >About Me </a> |
<a href="contact.html" >Contact Me </a> |
<a href="networks.html" >Networks</a> |
<a href="profile.html" >Credits</a>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
Then you can edit Menus name by changing About me,Contact me,Networks and Credits .
Also you can change some codes as bellow:
- text-align:right;
You can change this to right,center or left (eg:text-align:center).this is the position of your menu bar. - background-color:blue;
Change it to any color red,pink or any.You can use color codes also. - color:white;
this is text color change it to any color(colour –we use “color” for codings).
We use a:link and a:hover codes to do it.
Bellow code to animate when mouse move.
a:link{color:white;background-color:blue;text-
decoration:none}
a:hover{color:blue;background-color:white;text-
decoration:underline}
Don’t describe same codes again check above .Now let’s see how to use new code.
- text-decoration:none
You can use none ,underline and double for this.
No comments:
Post a Comment