<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 ----------> <div class="top-area"> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo" class="img-responsive"></a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/student.png" class="img-responsive"></div> Academics</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#student" data-toggle="tab">Student</a></li> <li><a href="#attendance" data-toggle="tab">Attendance</a></li> <li><a href="#timetable" data-toggle="tab">Time Table</a></li> <li><a href="#library" data-toggle="tab">Library</a></li> <li><a href="#certification" data-toggle="tab">Certification</a></li> <li><a href="#whtasnew" data-toggle="tab">Whats New</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane active in" id="student"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student Admission </li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student List </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Class Allocation </li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Student Category </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Id card Generation</li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Bulk Upload</li> <li> <div class="icon"><img src="images/icon/student-2.png" class="img-responsive"></div> Remarks </li> </ul> </div> </div> </div> <div class="tab-pane fade" id="attendance"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Attendance Register </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Attendance Report </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/checking-attendance.png" class="img-responsive"></div> Day Wise Report</li> </ul> </div> </div> </div> <div class="tab-pane fade" id="timetable"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Time Table Master </li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Set Period </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Set Week Days </li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Allocate Time Table </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> Assign Subject</li> <li> <div class="icon"><img src="images/icon/stopwatch.png" class="img-responsive"></div> View Time table</li> </ul> </div> </div> </div> <div class="tab-pane fade in" id="library"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Category</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Details </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Purchase</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Barcode Print</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Issue </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Return</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Renewal</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book List</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Damaged/Scrap Book </li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Damaged/Scrap Book Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Advance Booking Books</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Date Wise Book Issue/Return Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Dues List</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Student Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Staff Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Wise Report</li> <li> <div class="icon"><img src="images/icon/open-book2.png" class="img-responsive"></div> Book Issue/Return Report</li> </ul> </div> </div> </div> <div class="tab-pane fade" id="certification"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Certificate Type</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Custom Certificate </li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/diploma.png" class="img-responsive"></div> Generate Certificate </li> </ul> </div> </div> </div> <div class="tab-pane fade" id="whtasnew"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> News</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> Events</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bell.png" class="img-responsive"></div> Notice</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/manager-1.png" class="img-responsive"></div> Administration</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#fee" data-toggle="tab">Fee</a></li> <li><a href="#inventory" data-toggle="tab">Inventory</a></li> <li><a href="#transportation" data-toggle="tab">Transportation</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> <li><a href="#humanresource" data-toggle="tab">Human Resource</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="fee"> <div class="row"> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Configuration </li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Category</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Type</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Sub Category</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Receipt Format</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fine</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Discount</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Waiver</li> </ul> </div> <div class="col-sm-4"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Allocation</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Fee Collection</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Class wise Fee Collection </li> </ul> </div> </div> </div> <div class="tab-pane" id="inventory"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Vendors Registration </li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>item category</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>Store item</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> Receipt Voucher</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>Payment voucher</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> purchase invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>sales invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>purchase return invoice</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> sales return invoice</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>cash book</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>day book</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>sales report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>salesreturn report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div>purchase report</li> <li> <div class="icon"><img src="images/icon/accountant.png" class="img-responsive"></div> purchase return report</li> </ul> </div> </div> </div> <div class="tab-pane" id="transportation"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route Master</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route Details </li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Vehicle Details</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Driver Details</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Students Allocation</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Fee Collection</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Transport Cancellation</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Transport Cancellation Renewal</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Route change option</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Print Receipt</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> List All Route-Route Details</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Pending Report</li> <li> <div class="icon"><img src="images/icon/bus-1.png" class="img-responsive"></div> Paid Report</li> </ul> </div> </div> </div> <div class="tab-pane" id="settings"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> General Settings</li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Institute settings </li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Course & Batch Settings</li> <li> <div class="icon"><img src="images/icon/settings.png" class="img-responsive"></div> Manage Subject</li> </ul> </div> </div> </div> <div class="tab-pane" id="humanresource"> <div class="row"> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/user-1.png" class="img-responsive"></div> Interaction</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#interaction" data-toggle="tab">Interaction</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="interaction"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> News</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Events </li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Notice</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Home Work</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Dairy</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Gallery</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Send Email</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Mail Settings</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Mail Templates</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Send SMS</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> SMS Templates</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <div class="icon"><img src="images/icon/edit.png" class="img-responsive"></div> Report</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-12"> <div class="well"> <ul class="nav nav-tabs"> <li class="active"><a href="#report" data-toggle="tab">Report</a></li> </ul> <div id="TabContent" class="tab-content"> <div class="tab-pane active in" id="report"> <div class="row"> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Detail Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Academic Performance Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Birthdays Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Identity Card Generation</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Student Attendance Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Home Date Wise Fee Collection</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fees Due Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fee Fine Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Fee Fee Concession Report</li> </ul> </div> <div class="col-sm-3"> <ul class="sub-menu"> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Date Wise Book Issue</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Student Wise Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div> Book Wise Report</li> <li> <div class="icon"><img src="images/icon/user.png" class="img-responsive"></div>Book Return Report</li> </ul> </div> </div> </div> </div> </div> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img src="images/icon/avatar-.png" class="img-responsive"></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </li> </ul> </div> <!-- /.nav-collapse --> </nav> </div> </div>

/* CSS Document */ body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background-color: #fff; } .row { margin: 0; padding: 0; } .top-area { background-color: #eb7260; float: left; width: 100%; } .navbar-nav { margin-left: 6%; } .navbar-default .navbar-nav>li>a { color: #fff; } .navbar-brand { width: 135px; float: left; margin: 0; padding: 0; } /* .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color: #fff} */ .navbar-default { background-color: #eb7260; border: none; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background-color: #354459 !important; color: #fff !important } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { background-color: #354459 !important; color: #fff !important } .navbar-nav>li>a { padding-bottom: 10px; line-height: 25px } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; -webkit-box-shadow: none; box-shadow: none; background-color: #e9e1d6; border-radius: 0px; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #fff; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .sub-menu { margin: 0; padding: 0; width: 100%; float: left; margin-top: 30px; } .sub-menu li { list-style: none; line-height: 30px; color: #999; font-size: 13px; height: 45px; font-weight: 400; } .sub-menu li a { color: #999; } .sub-menu li a:hover { color: #EF041A; } .icon { width: 23px; float: left; margin-right: 15px; } /*tabstyle*/ .navbar { margin-bottom: 0px; } .nav-tabs { border: none; background-color: #e1e1e1; } .well { padding: 0px; border: none; background-color: #e6e6e6; margin: 0; box-shadow: none; border-radius: 0px; } .nav-tabs>li>a { color: #3e3e3e; border-radius: 0px; border: none; margin-right: 0; } .nav-tabs>li.active>a { background-color: #f1f1f1 !important; border-top: 1px solid #cccccc !important; border-left: 1px solid #cccc !important; border-right: 1px solid #cccccc !important; border-bottom: 3px solid #f1f1f1 !important; } .nav>li>a:focus, .nav>li>a:hover { background: none; } .tab-content>.tab-pane { min-height: 260px; margin: 0; } .tab-content>.active { background-color: #fff; } .sub-heading { margin: 20px 0 0 0; padding: 0; color: #ccc; } margin: 20px 0; }

$(document).ready(function () { $(".dropdown").click(function () { $('.dropdown-menu', this).stop(true, true).slideDown("fast"); $(this).toggleClass('open'); }); $(document).click(function (event) { console.log($(event.target).closest('.dropdown').length); if (!$(event.target).closest('.dropdown').length) { $('.dropdown').each(function () { if ($(this).has('open')) { $('.dropdown-menu', this).stop(true, true).slideUp("fast"); } }); } }); });