<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <nav class="sidebar" id="sidebar-wrapper"> <ul id="menu-content" class="menu-content in"> <li class="sidebar-label sidebar-title">simple. better. different.</li> <li class="advanced-search-group"> <form action="https://client.emkay.com/emkay/services" method="post"> <input type="hidden" name="command" value="advancedsearch.submit"/> <div class="input-group"> <input type="text" name="SEARCH_FIELD" class="form-control" placeholder="Where to?" /> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="fa fa-search"></i> </button> </div> </div> </form> </li> <li data-toggle="collapse" data-target="#fleet-dashboard-menu" class="collapsed active"> <a href="#"> <div class='livicon-evo' data-options='name: morph-bar-chart.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Fleet Dashboard</span> <span class="arrow"></span> </a> </li> <ul class="sub-menu collapse" id="fleet-dashboard-menu"> <li class="active"><a href="@Url.Content("~/")">Home</a></li> <li><a href="">Accident</a></li> <li><a href="@Url.Content("~/Acquisitions")">Acquisitions</a></li> <li><a href="@Url.Content("~/Expenses")">Expenses</a></li> <li><a href="@Url.Content("~/Inventory")">Inventory</a></li> <li><a href="@Url.Content("~/Fuel")">Fuel</a></li> <li><a href="@Url.Content("~/Licensing")">Licensing</a></li> <li><a href="@Url.Content("~/Maintenance")">Maintenance</a></li> <li><a href="@Url.Content("~/Remarketing")">Remarketing</a></li> </ul> <li> <a href="https://client.emkay.com/emkay/services?command=vehInfoCntr_Clnt_Veh_Sel.create&finalcommand=vehInfoCntr.frameGen.create"> <div class='livicon-evo' data-options='name: dashboard.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Vehicle Dashboard</span> </a> </li> <li data-toggle="collapse" data-target="#critical-alerts-menu" class="collapsed"> <a href="#"> <div class='livicon-evo' data-options='name: warning-alt.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Critical Alerts</span> <span class="critical-alert-count">143</span> <span class="arrow"></span> </a> </li> <ul class="sub-menu collapse" id="critical-alerts-menu"> <li>Fuel Card Misuse <span class="critical-alert-count">5</span></li> <li>Plate Expirations <span class="critical-alert-count">13</span></li> <li>Delayed Orders <span class="critical-alert-count">69</span></li> <li>Overdue Rental <span class="critical-alert-count">6</span></li> </ul> <li data-toggle="collapse" data-target="#reports-menu" class="collapsed"> <a href="#"> <div class='livicon-evo' data-options='name: globe.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Fleet Reports</span> <span class="arrow"></span> </a> </li> <ul class="sub-menu collapse" id="reports-menu"> <li><a href="https://client.emkay.com/emkay/services?command=clientfleetdyn.selectioncreate">My Reports</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientAnnualExp.create&resetCntr=Y&signon=client&country=USA">Annual Expense</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientReplacementAnalysis.parms&resetCntr=Y&signon=client&country=USA">Replacement Analysis</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientOrderStatus.create&resetCntr=Y&signon=client&country=USA">Order Status</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientVehicleAudit.create&resetCntr=Y&signon=client&country=USA">Inventory</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientMaintHistory.create&resetCntr=Y&signon=client&country=USA">Maintenance Detail</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientClaimReport.create&resetCntr=Y&signon=client&country=USA">Claim Status</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientMPGreport.create&resetCntr=Y&signon=client&country=USA">MPG Report</a></li> <li><a href="https://client.emkay.com/emkay/services?command=personalMileageReport.options&resetCntr=Y">Personal Mileage</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientFuel.create&resetCntr=Y&signon=client&country=USA">Fuel Detail</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientRenewalStatus.create&resetCntr=Y&signon=client&country=USA">License Renewal</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientVehicleExceptions.create&resetCntr=Y&signon=client&country=USA">Operations Report</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientInvoiceSelection.create&finalcommand=clientInvoiceReprint.create&signon=client&country=USA">Invoice History</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientSoldVehicle.create&resetCntr=Y&signon=client&country=USA">Sold Vehicle Analysis</a></li> <li><a href="https://client.emkay.com/emkay/services?command=clientRentalStatusReport.create&resetCntr=Y&signon=client&country=USA">Rental Status Report</a></li> <li><a href="https://client.emkay.com/emkay/services?command=CustomInvoiceSelection.view">Custom Invoicing Tool</a></li> <li><a href="https://client.emkay.com/emkay/services?command=tolltransaction.view&resetCntr=Y">Toll Transaction Report</a></li> </ul> <li> <a href="https://client.emkay.com/emkay/services?command=clientfleetdynalert.selectioncreate&signon=client&country=USA"> <div class='livicon-evo' data-options='name: bell.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>My Alerts</span> </a> </li> <li data-toggle="collapse" data-target="#vehicle-ordering-menu" class="collapsed"> <a href="#"> <div class='livicon-evo' data-options='name: truck.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Vehicle Ordering</span> <span class="arrow"></span> </a> </li> <ul class="sub-menu collapse" id="vehicle-ordering-menu"> <li>New Factory Order</li> <li>New Out of Stock Order</li> <li>Current Orders</li> <li>Driver Ordering</li> </ul> <li class="sidebar-label">Tools</li> <li> <a href="https://client.emkay.com/emkay/services?command=fleetResourcesMenu.create&signon=client&country=USA"> <div class='livicon-evo' data-options='name: users.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Fleet Resources</span> </a> </li> <li> <a href="https://client.emkay.com/emkay/services?command=fleetExchangeInquiry.loginCreate&signon=client&country=USA"> <div class='livicon-evo' data-options='name: swap-horizontal.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Fleet Exchange</span> </a> </li> <li> <a href="https://client.emkay.com/emkay/services?command=fleetTools.create&signon=client&country=USA"> <div class='livicon-evo' data-options='name: settings.svg; size: 20px; eventOn: parent; strokeStyle: round; style: solid;'></div> <span>Other Tools</span> </a> </li> <li class="sidebar-label">System</li> <li> <a href="#"> <div class='livicon-evo' data-options='name: comment.svg; size: 20px; style: solid; eventOn: parent; strokeStyle: round'></div> <span>Live Support</span> </a> </li> <li> <a href="https://client.emkay.com/emkay/services?command=logout&signon=client&country=USA"> @*<i class="fa fa-cog fa-lg"></i>*@ <div class='livicon-evo' data-options='name: gears.svg; size: 20px; style: solid; eventOn: parent; strokeStyle: round'></div> <span>Log out</span> </a> </li> </nav>

#sidebar-wrapper{ height:100%; width:200px; position:fixed; top:0; left:0; padding:0; list-style:none; border-left:2px solid #ccc; background-color:#2e353d; color:white; }