Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <nav class="website-nav navbar navbar-default navbar-static-top" role="navigation">
  
    <div class="navbar-inner">
        <div class="nav-center">
            <!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
            <div class="nav-brand"></div>
        </div>
    </div>
​
    <div class="alt-nav navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
            <span class="sr-only">Toogle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div><!-- Navigation header -->
​
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
            <li {{ INDEX_ACTIVE }}><a href="home"><span class="glyphicon glyphicon-cloud-upload"></span> Home</a></li>
            <li {{ REMOTE_ACTIVE }}><a href="remote"><span class="glyphicon glyphicon-globe"></span> Remote</a></li>
            <li {{ ZIP_ACTIVE }} class="visible-lg"><a href="zip"><span class="glyphicon glyphicon-folder-close"></span> ZIP</a></li>
            <li {{ POPULAR_ACTIVE }}><a href="popular"><span class="glyphicon glyphicon-star"></span> Popular</a></li>
        </ul>
​
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#register" data-toggle="modal"><span class="glyphicon glyphicon-registration-mark"></span> Register</a></li>
            <li><a href="#login" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;<span class="badge user-messages">0</span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-bell"></span>&nbsp;&nbsp;<span class="badge user-notification">0</span></a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle valign-middle" data-toggle="dropdown"><span class="glyphicon glyphicon-camera"></span>&nbsp; My Images</a>
                <ul class="dropdown-menu">
                    <li><a href="#">All images</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Album 1</a></li>
                    <li><a href="#">Album 2</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="http://placehold.it/100x100" class="img-circle avatar" alt="Avatar">
                    &nbsp;<span class="{% if S_SERVICE_USED == 'facebook' or S_USER_AVATAR != '' %}valign-middle{% endif %}"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ S_WEB_PATH }}user/{{ S_USERNAME }}"><span class="glyphicon glyphicon-user"></span> Me</a></li>
                    <li><a href="#settings" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                  <li><a href="#profile" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>
                    <li><a href="{{ S_WEB_PATH }}user/do/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
                </ul>
            </li>
        </ul>   
    </div>
</nav><!-- Navigation -->
</body>
</html>
 
.navbar-default {
  max-height: 51px; 
  .avatar {
    max-height: 24px;
  }
}
​
.navbar-collapse {
  max-height: none; 
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
davidpauljuniorpro
0viewers