JavaScript Beginner Tutorial
Monday, 11 May 2015
Javascript Navigation(Menu)
index.html
<!DOCTYPE html> <html> <head> <title>Javascript Navigation</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> <div class="menu"> <nav id="MENU"></nav> </div> </header> <div class="wrapper"> <div class="container"> </div> </div> <script src="script.js"></script> </body> </html>
style.css
body{ background:#333333; } .wrapper{ margin:auto; padding:20px; background:#ddd; } header{ padding:10px; background:#CCCCCC; } footer{ padding:10px; background:#CCCCCC; } .container{ padding:10px; background:#666666; } .menu{ margin:auto; padding:10px; background:#999999; text-align: center; } ul#menu { padding: 0; margin-bottom: 11px; } ul#menu li { display: inline; margin-right: 3px; } ul#menu li a { background-color: #ffffff; padding: 10px 20px; text-decoration: none; color: #696969; border-radius: 4px 4px 0 0; } ul#menu li a:hover { color: white; background-color: #0099FF; }
script.js
document.getElementById("MENU").innerHTML = "<ul id='menu'>" + "<li><a href='#'>Home</a></li>" + "<li><a href='#'>About</a></li>" + "<li><a href='#'>Services</a></li>" + "<li><a href='#'>Portfolio</a></li>" + "<li><a href='#'>Our Clients</a></li>" + "<li><a href='#'>Contacts</a></li>" + "</ul>";
No comments:
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment