1
\$\begingroup\$

I have created a bootstrap toolbar(navbar) which is working. my question is, since this is my first time on this topic if there is a place for improvement ? we are using some mock to enter some dummy data and its working

HTML

<!DOCTYPE html>
<html>
<head>
  <title>toolbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="toggle-button">
  <div class="wrapper">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-middle"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </div>


</div>

<nav id="navi" class="navbar navbar-inverse menuBar">
  <div class="container-fluid back">
    <div class="navbar-header">
      <a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
    </div>
    <ul class="nav navbar-nav">
      <li id="dropdown1" class="dropdown open keep-open">
        <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        <a>
        Collapsible Group 1</a>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
      <ul class="nav navbar-nav">
      <li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
      <li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
       <li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>

      </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
         <ul class="nav navbar-nav">
      <li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
      <li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
       <li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
       </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">

      </div>
    </div>
  </div>
</div>
        </ul>
      </li>

      <li><a href="#" id="list1" class="glyphicon glyphicon-phone" onclick="list1(this)"></a></li>

    </ul>
    <ul class="nav navbar-nav" style="margin-left:25%;">
     <form class="navbar-form navbar-left">
      <div class="input-group">

         <span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>   
        <input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
      </div>
    </form>
    </ul>

     <ul class="nav navbar-nav navbar-right">


<li class="dropdown">

       <a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
         <span class="badge badge-danger">2</span><span class="caret"></span>
        </a>
        <ul class="dropdown-menu notif" style="padding:20%;">
          <li>Hello</li>
          <hr>
          <li>Notif 2</li>
          <hr>
          <li>Notif 3</li>
        </ul>
      </li>
 <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" onclick="language(this)">English</a></li>
          <li><a href="#" onclick="language(this)">English-uk</a></li>
          <li><a href="#" onclick="language(this)">Finnish</a></li>
        </ul>
      </li>
      <li><a href="#" onclick="logout()"><span class="glyphicon glyphicon-log-in"></span> </a></li>
    </ul>
  </div>
</nav>
<p style="margin-left:25%;"><iframe src="http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm"  frameborder="0" width="660px" height="270px" marginheight="0" marginwidth="0" scrolling="No"><p>See the World Forests Clock at <a href="http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm">http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm</a>.</p></iframe></p>
<script src="app.js"></script>
</body>
</html> 

This is the css

* {
  box-sizing: border-box;
}

body {

}


a{
    text-decoration:none;
  cursor:pointer;
  color:white;
}
a:active,a:hover{
  outline:none;
  text-decoration:none;
  cursor:pointer;
  color:white;
}
.toggle-button {
  position: absolute;
  width: 50px;
  height: 50px;
  top:30px;
  left:30px;
/*  transform: translate(-22px, -20px);*/
  transition: .25s;
  z-index: 15;
  margin-right:50px;
}

.menuBar{
  opacity:0
}

#navi{
  margin-left:60px;
  height:25px;
}

.show{
  opacity:1;
   transition: opacity 2s ease; 
}


.toggle-button:hover {
  cursor: pointer;
}

.toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 80%;
  transition: .5s;
}

.toggle-button .menu-bar-top {
  border: 4px solid #555;
  border-bottom: none;
  top: 3px;
}

.toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #555;
  margin-top: 7px;
  margin-bottom: 7px;
  top: 7px;
}

.toggle-button .menu-bar-bottom {
  border: 4px solid #555;
  border-top: none;
  top: 25px;
}

@keyframes push {
    50%   {top:2px;
  left:2px;}
    100%  {top:10px;
  left:10px;}
}

.button-open{
  top:5px;
  left:5px;
  animation: push 0.3s ease; 
}

.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
}

.button-open .menu-bar-middle {
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
}

.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -7px);
  transition: .5s;
}

.title-wrapper{
    position: absolute;
    left:50px !important;
}

.blue-square{
    background: #006be5;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width:50px;
}

.toolbar-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 30;
    border-bottom: 1px solid #d1d1d1;
    box-sizing: border-box;
}

.toolbar {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #f5f5f5;
}

.toolbar-left{
    left: 0;
    width: 18em;
    z-index: 2;
}

.toolbar-center{
    left: 18em;
    right: 8em;
    z-index: 2;
}

.toolbar-right {
    right: 0;
    width: 8em;
    z-index: 2;
}

.panel{
    border:none;
}

.panel-body{
  background-color:#444;
  border:none;
}
.panel-default>.panel-heading{
  background-color:#444;
  border:none;
}

.badge-danger{
    width:25px;
    color:white;
    font-size:13px;
    background-color:red;
}

.notif{
background-color:#444;
padding:7%;
color:white;
}

.dropdown-menu{
    background-color:#444;
    color:white;
}

.dropdown-menu>li>a{
color:white;
}
.back{
    background-color:black;
}

.navbar {
min-height: 30px;
}

.navbar .navbar-brand {
padding: 0 12px;
font-size: 16px;
line-height: 38px;
height: 38px;
}

.navbar .navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 38px;
}

.navbar .navbar-toggle {
margin-top: 3px;
margin-bottom: 0px;
padding: 8px 9px;
}

.navbar .navbar-form {
margin-top: 2px;
margin-bottom: 0px
}

.navbar .navbar-collapse {
border-color: #A40303;
}
\$\endgroup\$
2
  • \$\begingroup\$ I tried to add your code to a code snippet here and it didn't work. \$\endgroup\$
    – Malachi
    Dec 20, 2016 at 21:33
  • \$\begingroup\$ You just need to use plunker that's it \$\endgroup\$
    – Jay
    Jan 11, 2017 at 19:28

1 Answer 1

1
\$\begingroup\$

Your HTML code is not properly indented and it makes your HTML hard to read, quickly.

this is how it should look, (I am surprised that none of your tags were missing their end tags)

<!DOCTYPE html>
<html>
    <head>
        <title>toolbar</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="toggle-button">
            <div class="wrapper">
                <div class="menu-bar menu-bar-top"></div>
                <div class="menu-bar menu-bar-middle"></div>
                <div class="menu-bar menu-bar-bottom"></div>
            </div>
        </div>

        <nav id="navi" class="navbar navbar-inverse menuBar">
            <div class="container-fluid back">
                <div class="navbar-header">
                    <a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
                </div>
                <ul class="nav navbar-nav">
                    <li id="dropdown1" class="dropdown open keep-open">
                        <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                        <a>
                                            Collapsible Group 1</a>
                                    </div>
                                    <div id="collapse1" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <ul class="nav navbar-nav">
                                                <li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                                                <li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                                                <li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                            Collapsible Group 2</a>
                                    </div>
                                    <div id="collapse2" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <ul class="nav navbar-nav">
                                                <li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                                                <li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                                                <li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                                            Collapsible Group 3</a>
                                    </div>
                                    <div id="collapse3" class="panel-collapse collapse">
                                        <div class="panel-body">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </ul>
                    </li>
                    <li><a href="#" id="list1" class="glyphicon glyphicon-phone" onclick="list1(this)"></a></li>
                </ul>
                <ul class="nav navbar-nav" style="margin-left:25%;">
                    <form class="navbar-form navbar-left">
                    <div class="input-group">

                        <span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>   
                        <input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
                    </div>
                    </form>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
                            <span class="badge badge-danger">2</span><span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu notif" style="padding:20%;">
                            <li>Hello</li>
                            <hr>
                            <li>Notif 2</li>
                            <hr>
                            <li>Notif 3</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="language(this)">English</a></li>
                            <li><a href="#" onclick="language(this)">English-uk</a></li>
                            <li><a href="#" onclick="language(this)">Finnish</a></li>
                        </ul>
                    </li>
                    <li><a href="#" onclick="logout()"><span class="glyphicon glyphicon-log-in"></span> </a></li>
                </ul>
            </div>
        </nav>
        <p style="margin-left:25%;">
            <iframe src="http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm"  frameborder="0" width="660px" height="270px" marginheight="0" marginwidth="0" scrolling="No">
                <p>
                    See the World Forests Clock at <a href="http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm">http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm</a>.
                </p>
            </iframe>
        </p>
        <script src="app.js"></script>
    </body>
</html> 

I would love to put this inside of a code snippet and tweak the CSS and see what tags I could get rid of. There are places where you have 3 nested DIVs and that just seems redundant to me.

\$\endgroup\$
5
  • \$\begingroup\$ Hi Malachi, thanks , since it my first Ui application in js/bootstrap my question is how to 1. structure it right , for example if the html become wider should I divide it to spreate files , if yes example will be helpful. 2. the event handlers are currently in the html files, is there is a best practise ? any additional comments and suggestion will be helpful,thanks!!! \$\endgroup\$ Dec 21, 2016 at 20:08
  • \$\begingroup\$ The indentations and new line characters are mostly for reading, you could have your entire HTML file on one line if you wanted to but it would be very hard to read. \$\endgroup\$
    – Malachi
    Dec 21, 2016 at 20:12
  • \$\begingroup\$ No I mean if the html become big I should devide it to diffrent files ? \$\endgroup\$ Dec 21, 2016 at 20:16
  • \$\begingroup\$ you probably want to make new pages of your website, if you have too much information on one page of your website viewers may get board before they read the entire thing. but HTML files can be rather big if you include CSS and JavaScript in the HTML files instead of by themselves in separate files that you link to in the HTML file. HTML files are fairly long sometimes, please keep that in mind \$\endgroup\$
    – Malachi
    Dec 21, 2016 at 20:20
  • \$\begingroup\$ There is some reference as best practise to create html project which include html & css & js ? I need someting like this... \$\endgroup\$ Dec 21, 2016 at 20:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.