Difference between revisions of "Template:Heidelberg/navbar"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
−
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <style>
 +
        .navbar-right {
 +
            width: 100%;
 +
        }
 +
 
 +
        #menucontainer {
 +
            top: 0px;
 +
            width: 100%;
 +
            height: 64px;
 +
            max-height: 64px;
 +
            background: red;
 +
            padding: 0px;
 +
            white-space: nowrap;
 +
        }
 +
 
 +
        #navcontainer-left-outer {
 +
            width: 15%;
 +
            height: 100%;
 +
            float: left;
 +
            background: blue;
 +
        }
 +
 
 +
        #navcontainer-left-inner {
 +
            width: 96%;
 +
            height: 60px;
 +
            margin: 2px 2% 2px 2%;
 +
            float: left;
 +
            background: purple;
 +
        }
 +
 
 +
        #navcontainer-right-outer {
 +
            width: 85%;
 +
            float: right;
 +
            height: 100%;
 +
            background: yellow;;
 +
        }
 +
 
 +
        #navcontainer-right-inner {
 +
            width: 99%;
 +
            float: right;
 +
            margin: 2px 0.5% 2px 0.5%;
 +
            height: 60px;
 +
            background: green;;
 +
        }
 +
 
 +
        .menubox {
 +
            float: right;
 +
 
 +
        }
 +
 
 +
        #navcontainer-right-inner > ul > li {
 +
            float: right;
 +
        }
 +
    </style>
 
</head>
 
</head>
 
<body>
 
<body>
 +
 
<nav class="navbar navbar-default navbar-fixed-top hidden-xs">
 
<nav class="navbar navbar-default navbar-fixed-top hidden-xs">
−
    <div class="container-fluid" id="menubar-big">
+
<div class="container" id="menucontainer">
 +
    <div id="navcontainer-left-outer">
 +
        <div id="navcontainer-left-inner">
 +
            <ul class="nav navbar-nav left">
 +
                <a class="navbar-brand" href="#"><img class="logo" src="../media/LP/shark.png"></a>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
    <div id="navcontainer-right-outer">
 +
        <div id="navcontainer-right-inner">
 +
            <ul class="nav navbar-nav navbar-right">
  
 +
                <!-- Project -->
 +
                <li class="dropdown"  class="menubox">
 +
                    <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 +
                        <p class="menutext">
 +
                            <img class="menuicon" src="../media/icons/favs/project.png">
 +
                            Project
 +
                        </p></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Members</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Collaborations</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Supervisors</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Sponsors</p></a></li>
 +
                    </ul>
 +
                </li>
  
−
        <ul class="nav navbar-nav" id="navbar-left">
+
                <!-- Software -->
−
            <a class="navbar-brand" href="#"><img class="logo" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png"></a>
+
                <li class="dropdown" class="menubox">
−
        </ul>
+
                    <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
 +
                        <p class="menutext">
 +
                            <img class="menuicon" src="../media/icons/favs/software.png">
 +
                            Software
 +
                        </p></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">JAWS</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">TRANS</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Midnight*</p></a></li>
 +
                    </ul>
 +
                </li>
  
−
        <ul class="nav navbar-nav" id="navbar-right">
+
                <!-- Notebook -->
−
<div style="float: right;">
+
                <li class="dropdown"  class="menubox">
−
            <!-- Project -->
+
                    <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
−
            <li class="dropdown"  class="menubox">
+
                        <p class="menutext">
−
                <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
                            <img class="menuicon" src="../media/icons/favs/notebook.png">
−
                    <p class="menutext">
+
                            Notebook
−
                        <img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">
+
                         </p></a>
−
                         Project
+
                    <ul class="dropdown-menu">
−
                    </p></a>
+
                     </ul>
−
                <ul class="dropdown-menu">
+
                 </li>
−
                     <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Members</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Collaborations</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Supervisors</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Sponsors</p></a></li>
+
−
                 </ul>
+
−
            </li>
+
  
−
            <!-- Software -->
+
                <!-- Parts -->
−
            <li class="dropdown"  class="menubox">
+
                <li class="dropdown"  class="menubox">
−
                <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
                    <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
−
                    <p class="menutext">
+
                        <p class="menutext">
−
                        <img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">
+
                            <img class="menuicon" src="../media/icons/favs/parts.png">
−
                         Software
+
                            Parts
−
                    </p></a>
+
                         </p></a>
−
                <ul class="dropdown-menu">
+
                    <ul class="dropdown-menu">
−
                </ul>
+
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Team parts</p></a></li>
−
            </li>
+
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Basic parts</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Composite parts</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Part collection</p></a></li>
 +
                    </ul>
 +
                </li>
  
−
            <!-- Notebook -->
+
                <!-- Team -->
−
            <li class="dropdown"  class="menubox">
+
                <li class="dropdown"  class="menubox">
−
                <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
                    <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
−
                    <p class="menutext">
+
                        <p class="menutext">
−
                        <img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">
+
                            <img class="menuicon" src="../media/icons/favs/team.png">
−
                         Notebook
+
                            Team
−
                    </p></a>
+
                         </p></a>
−
                <ul class="dropdown-menu">
+
                    <ul class="dropdown-menu">
−
                </ul>
+
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Members</p></a></li>
−
            </li>
+
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Collaborations</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Supervisors</p></a></li>
 +
                        <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Sponsors</p></a></li>
 +
                    </ul>
 +
                </li>
  
−
            <!-- Parts -->
+
                <!-- Human practice -->
−
            <li class="dropdown"  class="menubox">
+
                <li class="menubox"><a href="#"><p class="menutext"><img class="menuicon" src="../media/icons/favs/humanpractise.png">   Human practice</p></a></li>
−
                <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
−
                    <p class="menutext">
+
−
                        <img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">
+
−
                        Parts
+
−
                    </p></a>
+
−
                <ul class="dropdown-menu">
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Team parts</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Basic parts</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Composite parts</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Part collection</p></a></li>
+
−
                </ul>
+
−
            </li>
+
  
−
            <!-- Team -->
+
                <!-- Safety -->
−
            <li class="dropdown" class="menubox">
+
                <li class="menubox" style="margin-right: 10px;"><a href="#"><p class="menutext"><img class="menuicon" src="../media/icons/favs/safety.png">   Safety</p></a></li>
−
                <a href="#" class="dropdown-toggle menubox" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
−
                    <p class="menutext">
+
−
                        <img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">
+
−
                        Team
+
−
                    </p></a>
+
−
                <ul class="dropdown-menu">
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Members</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Collaborations</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Supervisors</p></a></li>
+
−
                    <li class="dropdownbox"><a href="#"><p class="menutext dropdown-text">Sponsors</p></a></li>
+
−
                </ul>
+
−
            </li>
+
  
−
             <!-- Human practice -->
+
             </ul>
−
            <li class="menubox"><a href="#"><p class="menutext"><img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">Human practice</p></a></li>
+
         </div>
−
 
+
−
            <!-- Safety -->
+
−
            <li class="menubox" style="margin-right: 10px;"><a href="#"><p class="menutext"><img class="menuicon" src="https://static.igem.org/mediawiki/2015/3/34/Heidelberg_media_project.png">Safety</p></a></li>
+
−
 
+
−
        </ul>
+
−
    </div>
+
−
    </div>
+
−
    </div>
+
−
</nav>
+
−
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
+
−
         <a class="navmenu-brand" href="#">Brand</a>
+
−
        <ul class="nav navmenu-nav">
+
−
            <li class="active"><a href="#">Home</a></li>
+
−
            <li><a href="#">Link</a></li>
+
−
            <li><a href="#">Link</a></li>
+
−
        </ul>
+
−
    </nav>
+
−
    <div class="navbar navbar-default navbar-fixed-top hidden-lg hidden-md hidden-sm" id="menubar-small">
+
−
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body" style="background-color: deepskyblue;">
+
−
            <span class="icon-bar"></span>
+
−
            <span class="icon-bar"></span>
+
−
            <span class="icon-bar"></span>
+
−
        </button>
+
 
     </div>
 
     </div>
 +
</div>
 
</body>
 
</body>
 +
</html>

Revision as of 10:36, 17 August 2015