Bootsnav - Bootstrap menu multi purpose header

    <!-- Start Navigation -->
    <nav class="navbar navbar-default bootsnav">

        <!-- Start Top Search -->
        <div class="top-search">
        	<div class="container">
            <form class="form-inline">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn"><a class="btn btn-info"><i class="fa fa-search"></i></a></span>
		            <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                </div>
            </form>
            </div>
        </div>
        <!-- End Top Search -->

        <div class="container">            
            <!-- Start Atribute Navigation -->
            <div class="attr-nav">
                <ul>
                    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
                    <li id="toggle" class="side-menu"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></li>
                </ul>
            </div>
           <!-- End Atribute Navigation -->

            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button>
                    <div class="bar1"></div><div class="bar2"></div><div class="bar3"></div>
                </button>
                <a class="navbar-brand" href="#brand"><img src="images/brand/siteTitle.png" class="logo" alt=""></a>
            </div>
            <!-- End Header Navigation -->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="navbar-menu">
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="active"><a href="#">トップ</a></li>
                    <li class="dropdown megamenu-fw">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">会社情報</a>
                        <ul class="dropdown-menu megamenu-content" role="menu">
                            <li>
                                <div class="row">
                                    <div class="col-menu col-md-6">
                                        <h6 class="title">会社概要</h6>
                                        <div class="content">
                                            <ul class="menu-col">
                                                <li><a href="#">代表挨拶</a></li>
                                                <li><a href="#">会社沿革</a></li>
                                                <li><a href="#">事業紹介</a></li>
                                                <li><a href="#">経営理念</a></li>
                                                <li><a href="#">事業所一覧</a></li>
                                                <li><a href="#">オフィス紹介</a></li>
                                            </ul>
                                        </div>
                                    </div><!-- end col-3 -->
                                    <div class="col-menu col-md-6">
                                        <h6 class="title">事業内容</h6>
                                        <div class="content">
                                            <ul class="menu-col">
                                                <li><a href="#">新規サイト制作</a></li>
                                                <li><a href="#">Webサイトの更新,改良</a></li>
                                                <li><a href="#">Webサイト運用.ホスティング</a></li>
                                                <li><a href="#">WEBコンサルティング</a></li>
                                                <li><a href="#">Webマーケティング</a></li>
                                                <li><a href="#">SEO・SEM対策</a></li>
                                            </ul>
                                        </div>
                                    </div><!-- end col-3 -->
                                </div><!-- end row -->
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">制作実績</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" >採用情報</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">新卒採用</a></li>
                            <li><a href="#">中途採用</a></li>
                            <li><a href="#">スタッフ紹介</a></li>
                            <li><a href="#">採用責任者</a></li>
                        </ul>
                    </li>
                    <li><a href="#">お問い合わせ</a></li>
                    <li><a href="#">新着情報</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>   

        <!-- Start Side Menu -->
        <div class="side">
            <a href="#" class="close-side"><i class="fa fa-times"></i></a>
            <div class="widget">
                <h6 class="title">Custom Pages</h6>
                <ul class="link">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="widget">
                <h6 class="title">Additional Links</h6>
                <ul class="link">
                    <li><a href="#">Retina Homepage</a></li>
                    <li><a href="#">New Page Examples</a></li>
                    <li><a href="#">Parallax Sections</a></li>
                    <li><a href="#">Shortcode Central</a></li>
                    <li><a href="#">Ultimate Font Collection</a></li>
                </ul>
            </div>
        </div>
        <!-- End Side Menu -->
    </nav>
    <!-- End Navigation -->

    <div class="clearfix"></div>

    
ページトップへ戻る