"Nav bar"
Bootstrap 3.3.0 Snippet by escapedlion

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Signika+Negative:400,700' rel='stylesheet' type='text/css'> <!-- icons --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="http://netdna.bootstrapcdn.com/bootswatch/3.1.0/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <style> /* global section style */ #TixContent { background-color: #e0e0e0;} #TixManagementContent { background-color: #fcfbfc} #navbar { border-radius: 0px; padding: 0px;} #wrapper{ text-align: left; padding: 10px;} /* remove outline and underscore from buttons - nasty things I hate 'em*/ a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus, button.btn, button.btn:link, button.btn:visited, button.btn:hover, button.btn:active, button.btn:focus { outline:0; text-decoration:none; } ul.dropdown-menu li a, ul.dropdown-menu li a:link, ul.dropdown-menu li a:visited, ul.dropdown-menu li a:hover, ul.dropdown-menu li a:active, ul.dropdown-menu li a:focus { text-decoration:none; } /* navbar search */ nav#navbar form.navbar-form .input-group-btn ul.dropdown-menu { min-width: 25px;} nav#navbar form.navbar-form div.form-group div.input-group div.input-group input.form-control { width: 100%;} .ui-autocomplete { max-height: 400px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; } .ui-autocomplete .ui-menu-item > a:hover, .ui-autocomplete .ui-menu-item > a.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-state-active, .ui-autocomplete .ui-menu-item > a.ui-state-focus { color: #ffffff; text-decoration: none; background-color: #0088cc; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background-image: none; color: #ffffff; text-decoration: none; background-color: #0088cc; } /* navbar buttons */ nav#navbar div#navbar-collapsible div.navbar-btn.navbar-left button.btn.btn-nav { margin-right: 5px; } nav#navbar div#navbar-collapsible div.navbar-btn.navbar-right button.btn.btn-nav { margin-left: 5px; } /* navbar preferences form */ navv#navbar div#navbar-collapsible div.navbar-btn div.dropdown ul.dropdown-menu {width: 350px; padding:0; margin:0;} navv#navbar div#preferences.panel {padding: 0px; margin-bottom:0;} /* carousel image slider */ .carousel-caption { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.45); left: 0; right: 0; bottom: 0; padding: 1px; position: absolute; } .carousel-caption .item-name { padding-top: 10px; } div.panel-footer div.btn-group button.btn { border-left:2px solid white; border-right:2px solid white; } /* masthead */ header h1 { line-height: 31px; letter-spacing: -1px; padding:0; margin:0;} header h1 a { text-decoration: none; letter-spacing: -1px; padding:0; margin:0;} header h1 a .dark { font-weight: 700; text-shadow: 1px 1px 1px rgba(51,51,51,.30); } header h1 a .light { font-weight: 400; text-shadow: 0px 0px 1px rgba(0,0,0,.30); } /* search bar */ /* category listing */ .badge {background-color: transparent;} a.list-group-item {text-decoration: none;} </style> </head> <body class="flaty"> <div class="container"> <div class="panel panel-default"> <nav id="navbar" class="navbar navbar-default" role="navigation"> <div class="navbar-btn navbar-left"> <button type="button" class="btn btn-nav btn-default"><span class="fa fa-bars"></span><span class="nav-label"> Menu</span></button> <a type="button" class="btn btn-nav btn-default active" href="/Support/tixDashboard/index.asp"> <span class="fa fa-dashboard nav-icon"></span> <span class="nav-label">Dashboard</span> </a> </div> <div class="navbar-btn navbar-right"> <div class="dropdown" id="preferences-dropdown"> <button type="button" class="btn btn-nav btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span> <span class="nav-label"> Preferences</span> </button> <ul class="dropdown-menu" style="width:300px; padding:0px;"> <li> <form class="form-horizontal" id="preferences" action="" method="post" accept-charset="utf-8"> <div class="panel panel-default" id="preferences" style="margin:0px;"> <div class="panel-heading"> <span class="panel-label">User Preferences</span> </div> <div class="panel-body"> <div class="form-group"> <label for="theme_name" class="col-lg-6 control-label"> Theme </label> <div class="col-lg-6"> <select class="form-control" id="theme_name" name="theme_name"> <option value="amelia"> Amelia </option> <option value="cerulean"> Cerulean </option> <option value="cosmo"> Cosmo </option> <option value="cyborg"> Cyborg </option> <option value="darkly"> Darkly </option> <option value="bootstrap"> Default </option> <option value="flatly"> Flatly </option> <option value="journal"> Journal </option> <option value="lumen"> Lumen </option> <option value="readable"> Readable </option> <option value="simplex"> Simplex </option> <option value="slate"> Slate </option> <option value="spacelab"> Spacelab </option> <option value="superhero"> Superhero </option> <option value="united"> United </option> <option value="yeti"> Yeti </option> </select> </div> </div> <div class="form-group"> <label for="navbar_style" class="col-lg-6 control-label" > Navbar Style </label> <div class="col-lg-6"> <select class="form-control" id="navbar_style" name="navbar_style"> <option value="navbar-default">Default</option> <option value="navbar-inverse">Inverse</option> </select> </div> </div> <div class="form-group"> <label for="btn_style" class="col-lg-6 control-label" > Nav Btn Style </label> <div class="col-lg-6"> <select class="form-control" id="btn_style" name="btn_style"> <option value="btn-primary">Primary</option> <option value="btn-default">Default</option> <option value="btn-success">Success</option> <option value="btn-info">Info</option> <option value="btn-warning">Warning</option> <option value="btn-danger">Danger</option> <option value="btn-inverse">Inverse</option> </select> </div> </div> <div class="form-group"> <label for="panel_style" class="col-lg-6 control-label" > Panel Style </label> <div class="col-lg-6"> <select class="form-control" id="panel_style" name="panel_style"> <option value="panel-primary">Primary</option> <option value="panel-default">Default</option> <option value="panel-success">Success</option> <option value="panel-info">Info</option> <option value="panel-warning">Warning</option> <option value="panel-danger">Danger</option> </select> </div> </div> <div class="form-group"> <label for="text_size" class="col-lg-6 control-label"> Icon Labels </label> <div class="col-lg-6"> <select class="form-control" id="display_label" name="display_label"> <option value="hide">Icons Only</option> <option value="">Icons/Labels</option> </select> </div> </div> </div> <div class="panel-footer"> <div class="form-group"> <div class="col-lg-12"> <button type="submit" class="btn btn-primary btn-block">Update</button> <button type="submit" class="btn btn-default btn-block">Reset</button> </div> </div> </div> </div> </form> </li> </ul> </div> </div> <div class="navbar-btn navbar-right"> <button type="button" class="btn btn-nav btn-default"><span class="fa fa-bell"></span><span class="nav-label"> Alerts</span></button> </div> <form action="clientsearch/index.asp" method="post" class="navbar-form" name="search-form" id="search-form" accept-charset="utf-8"> <div class="form-group" style="display:inline;"> <div class="input-group"> <span class="input-group-btn btn-block" > <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="outline:1px solid #7F9192; margin-left:10px;"> <span class="glyphicon glyphicon-search"></span> <span class="nav-label"> Search</span> <span class="fa fa-caret-down"></span> </button> <ul id="search-option" class="dropdown-menu pull-left" role="menu"> <li> <a href="#" data-searchtype="search-user" data-placeholder="Enter User Name (first or last)"> <span class="glyphicon glyphicon-user"></span> <span class="nav-label">User</span> </a> </li> <li> <a href="#" data-searchtype="search-org" data-placeholder="Enter Organization Name"> <span class="fa fa-building-o"></span> <span class="nav-label">Organization</span> </a> </li> <li> <a href="#" data-searchtype="search-kb" data-placeholder="Enter Search Terms"> <span class="fa fa-book"></span> <span class="nav-label">KnowledgeBase</span> </a> </li> <li> <a href="#" data-searchtype="search-venue" data-placeholder="Enter Venue Name"> <span class="fa fa-map-marker"></span> <span class="nav-label">Venue</span> </a> </li> <li> <a href="#" data-searchtype="search-pl" data-placeholder="Enter Private Label"> <span class="fa fa-ticket"></span> <span class="nav-label">Private Label</span> </a> </li> </ul> </span> <div class="input-group col-lg-12 center-block ui-helper-clearfix"> <input type="text" name="search-query" id="search-query" class="form-control" autocomplete="off" placeholder="Choose search type" disabled=""> </div> <div class="input-group-btn navbar-btn" style="outline:1px solid #7F9192; border-radius:6px;"> <button class="btn btn-default btn-nav"> GO </button> </div> </div> </div> </form> </nav> <section id="wrapper"> <div class="row"> <div class="col-md-12"> <div class="well well-sm masthead" id="mastHead"> <h3> <a href="index.asp"> <span class="text-primary" id="headerName">Masthead</span> </a> </h3> </div> </div> </div> </section> </div> </body> </html>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript" ></script> <script type="text/javascript"> $('table:eq(0)').attr("id", "TixContent"); $('table:eq(1)').attr("id", "TixManagementContent"); $( "div.TixManagementContent" ).removeClass( "TixManagementContent" ).attr("class", "boxed-page" ); </script> <script type="text/javascript"> function save_settings() { //Get form values and save to local storage localStorage.setItem("theme_name", $( "#theme_name" ).val()); localStorage.setItem("navbar_style" , $( "#navbar_style" ).val()); localStorage.setItem("btn_style", $( "#btn_style" ).val()); localStorage.setItem("panel_style", $( "#panel_style" ).val()); localStorage.setItem("display_label", $( "#display_label" ).val()); apply_preferences_to_page(); } function load_settings() { //Get settings stored in local storage var theme_name = localStorage.getItem( "theme_name" ); var navbar_style = localStorage.getItem( "navbar_style" ); var btn_style = localStorage.getItem( "btn_style" ); var panel_style = localStorage.getItem( "panel_style" ); var display_label = localStorage.getItem( "display_label" ); //Update form with preferences $("#theme_name").val(theme_name); $("#navbar_style").val(navbar_style); $("#btn_style").val(btn_style); $("#panel_style").val(btn_style); $("#display_label").val(display_label); apply_preferences_to_page(); } function apply_preferences_to_page() { var theme_name = localStorage.getItem("theme_name"); var navbar_style = localStorage.getItem("navbar_style"); var btn_style = localStorage.getItem("btn_style"); var panel_style = localStorage.getItem("panel_style"); var display_label = localStorage.getItem("display_label"); //apply setting to the page $("body").attr("class",theme_name); $(".current-theme").html(theme_name); $('link[title="theme"]').attr('href','https://netdna.bootstrapcdn.com/bootswatch/3.1.1/'+theme_name+'/bootstrap.min.css'); $("nav#navbar").attr("class", "navbar "+navbar_style); $('nav#navbar button.btn.btn-nav').attr('class','btn btn-nav '+btn_style); $('nav#navbar button.btn.dropdown-toggle').attr('class','btn '+btn_style+' dropdown-toggle'); $('.panel').attr('class','panel '+panel_style); $(".nav-label").attr("class",'nav-label '+display_label); $(".dash-label").attr("class",'dash-label '+display_label); } $(function() { load_settings(); $('form#preferences').submit(function(event){ event.preventDefault(); save_settings(); $("#preferences-dropdown").removeClass("open"); }); }); </script> <script type="text/javascript"> // This triggers after each slide change $('.carousel').on('slid.bs.carousel', function () { var carouselData = $(this).data('bs.carousel'); var currentIndex = carouselData.getActiveIndex(); var total = carouselData.$items.length; // Now display this wherever you want var text = (currentIndex + 1) + " of " + total; $('#carousel-index').text(text); }); </script> <script> $(function() { $.ajax({ url: "./Support/tixDashboard/data/xml/knowledgebase.xml", //url: "data/xml/knowledgebase.xml", dataType: "xml", success: function( parseXML ) { var data = $( "article", parseXML ).map(function() { return { label: $( "title", this ).text(), value: $( "id", this ).text() }; }).get(); $.ui.autocomplete.prototype._renderItem = function( ul, item) { //this allows for search to find all matches at the begining of the word, plus not case sensitive //var re = new RegExp("^" + this.term, "i") ; //this allows for search to find all matches, not case sensitive var re = new RegExp("" + this.term, "i"); //this keeps the correct case on the search results var t = item.label.replace(re,"<B>" + "$&" + "</B>"); //this replaces the search result case with the same case as the search term //var t = item.label.replace(re,"<span style='font-weight:bold;color:#0088CC;'>" + this.term + "</span>"); return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + t + "</a>" ) .appendTo( ul ); }; $("#search-query" ).autocomplete({ source: data, minLength: 1, focus: function (event, ui) { $(event.target).val(ui.item.label); return false; }, select: function(event, ui) { window.location.href = 'Support/tixDashboard/tixKnowledgeBase25.1/index.asp?mode=single&id=' + ui.item.value; e.preventDefault() }, }) } }); }); </script> <script> //Search Box Functions $(function() { //Triggered on drop down list $('#search-option.dropdown-menu li a').click(function(event) { $("#search-query").val(''); $("#search-query").focus(); //Grab the selected item name & icon //Update the button with the selected item name and icon var selHTML = $(this).html(); $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selHTML+'<span class="caret"></span>'); //Grab the selected item placeholder //Update text field with selected item placeholder var selPlace = $(this).data("placeholder"); $("input[name=search-query]").attr("placeholder", selPlace); //Grab the selected item search type var selSearchType = $(this).data("searchtype"); $("#headerName").html(selSearchType); if(selSearchType == "search-user") { $('input#search-query').css('border-color','blue'); // place-holder green $( "#search-query" ).autocomplete({disabled: true}); $("#search-query").prop("disabled", false); } else if(selSearchType == "search-org") { $('input#search-query').css('border-color','blue'); // place-holder green $( "#search-query" ).autocomplete({disabled: true}); $("#search-query").prop("disabled", false); } else if(selSearchType == "search-kb") { $('input#search-query').css('border-color','green'); // place-holder green $( "#search-query" ).autocomplete({disabled: false}); // enable autocomplete $("#search-query").prop("disabled", false); } else if(selSearchType == "search-venue") { $('input#search-query').css('border-color','blue'); // place-holder green $( "#search-query" ).autocomplete({disabled: true}); $("#search-query").prop("disabled", false); } else if(selSearchType == "search-pl") { $('input#search-query').css('border-color','blue'); // place-holder green $( "#search-query" ).autocomplete({disabled: true}); $("#search-query").prop("disabled", false); } else { $('input#search-query').css('border-color','red'); // red $( "#search-query" ).autocomplete({disabled: true}); $("#search-query").prop("disabled", false); return true; } }); }); </script> <script> $(function() { $.ajax( { url: "data/xml/knowledgebase.xml", dataType: "xml", success: function( parseXML ) { var data = $( "article", parseXML ).map(function() { return { label: $( "title", this ).text(), value: $( "id", this ).text() }; }).get(); $.ui.autocomplete.prototype._renderItem = function( ul, item) { //this allows for search to find all matches at the begining of the word, plus not case sensitive //var re = new RegExp("^" + this.term, "i") ; //this allows for search to find all matches, not case sensitive var re = new RegExp("" + this.term, "i"); //this keeps the correct case on the search results var t = item.label.replace(re,"<B>" + "$&" + "</B>"); //this replaces the search result case with the same case as the search term //var t = item.label.replace(re,"<span style='font-weight:bold;color:#0088CC;'>" + this.term + "</span>"); return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + t + "</a>" ) .appendTo( ul ); }; $("#search-query" ).autocomplete( { source: data, minLength: 1, focus: function (event, ui) { $(event.target).val(ui.item.label); return false; }, select: function(event, ui) { window.location.href = 'tixKnowledgeBase/index.asp?mode=single&id=' + ui.item.value; e.preventDefault() }, }) } }); }); </script> <script> // ADD SLIDEDOWN ANIMATION TO DROPDOWN // $('.dropdown').on('show.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // ADD SLIDEUP ANIMATION TO DROPDOWN // $('.dropdown').on('hide.dropdown', function(e){ $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); }); </script>

Related: See More


Questions / Comments: