How to Create a Navigation Bar With Drop down menu using Bootstrap
Program
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <script language="javascript"> | |
| document.onmousedown=disableclick; | |
| status="Right Click Disabled"; | |
| function disableclick(event) | |
| { | |
| if(event.button==2) | |
| { | |
| alert(status); | |
| return false; | |
| } | |
| } | |
| document.onkeydown = function(e) { | |
| if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) {//Alt+c, Alt+v will also be disabled sadly. | |
| alert('not allowed'); | |
| } | |
| return false; | |
| }; | |
| </script> | |
| <title>Welcome to Our Site</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-inverse"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#">tech-SAS IT Consulting</a> | |
| </div> | |
| <div> | |
| <ul class="nav navbar-nav"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li class><a href="#">About Us</a></li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Software Application Devolopment</a></li> | |
| <li><a href="#">Web Application Devolopment</a></li> | |
| <li><a href="#">Mobile Application Devolopment</a></li> | |
| <li><a href="#">Seo</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profitfolio<span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#"> Current clients</a></li> | |
| <li><a href="#">Our Existing clients</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Clients <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">RealEstate</a></li> | |
| <li><a href="#">Travel And Turisoum</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Technologies <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Java/J2EE </a></li> | |
| <li><a href="#"> Asp.net</a></li> | |
| <li><a href="#"> Php-mysql</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Carees<span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Join Our Team </a></li> | |
| <li><a href="#">Current Opennings</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About Our team <span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">Our Mission</a></li> | |
| <li><a href="#">Our Vision</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Contact Us<span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#">How to Reach</a></li> | |
| <li><a href="#">Location</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> | |
| <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <h3>Right Aligned Navbar</h3> | |
| <p>The .navbar-right class is used to right-align navigation bar buttons.</p> | |
| </div> | |
| </body> | |
| </html> | |
No comments:
Post a Comment