Can someone explain part of this code to me?

HTML & CSS
1

I have this code, most of which I got from another source awhile back.

<!DOCTYPE html>
<html>

<head>
    <link href="\css/stylesheet.css" rel="stylesheet"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />

</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div id="spacerDiv">
                <a class="navbar-left"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul id="navigationbar" class="nav navbar-nav">
                <li id="homebutton" class="dropdown"><a href="#">@Html.ActionLink("Home", "Index", "Home")</a></li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
                        <li><a href="#">@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
                    </ul>
                </li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                                <li><a href="#">@Html.ActionLink("Payroll Forms", "PayrollForms", "FormsHandlers")</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Pay Stubs</a></li>
                        <li><a href="#">@Html.ActionLink("FAQ", "FAQ", "FormsHandlers")</a></li>
                    </ul>
                </li>
                <li id="menubuttons" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">ISS Support</a></li>
                        <li><a href="#">Purchase Requests</a></li>
                        <li><a href="#">Maint. Support</a></li>
                    </ul>
                </li>
            </ul>
            <form id="searchbar" method="get">
                <input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
                <input type="submit" id="searchbutton" value="Go!"/>
            </form>
        </div><!-- /.navbar-collapse -->
</nav>

I’m trying to go through the code and clean it up a little and maybe fix a few small issues with the navigation bar. I have this bit of code toward the top:

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

but if I comment it out and run the page, it looks and behaves exactly the same. Can any one tell me what this code is supposed to be doing and if it isn’t changing anything, is it ok to take it out?

2

That looks like a hamburger menu icon which will probably be only show when a smaller view port is used.

2 Likes
3

It’s difficult to tell from the HTML alone, but it looks like a button to toggle the menu visibility on/off, based on the class names. It would help confirm this if you could post the code for the associated CSS and/or JavaScript.

4

Here’s the CSS:

#layoutBody {
    background: #353c3e;
    color: white;
    margin: 0%;
    padding: 0%;
}

#homebutton {
    margin-top: 11.5%;
    margin-right: 3%;
    padding-right: 0%;
}

#navigationbar {
    height: 12em;
    width: 60%;
}

.marginBottom-0 {
    margin-bottom: 0;
}

#menubuttons {
    margin-top: 15%;
    padding: 0;
    margin-left: 12%;
    margin-right: 0;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #555;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

#searchbar {
    float: right;
    margin-top: 10%;
}

#logo {
    position: relative;
    height: 10em;
    width: auto;
    padding: 0;
    margin-top: 15px;
}

#spacerDiv {
    height: 8em;
    width: 22em;
}
5

Looks like DaveMaxwell was correct! It’s a hamburger button! Thank you!

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.