Responsive Menu – Admin Panel – Bootstrap Menu

Recently I had to create an Admin Panel Menu and this is what I came up with.

Below is the code and Fiddle





This menu has a responsive design and will change and resize when the screen decreases in size.

LESS / SCSS

.admin-panel {
    overflow: hidden;

    li {
        float: left;
        width: 33%;
        height: 115px;
        line-height: 1.4;
        text-align: center;
        background-color: #f9f9f9;
        border: 1px solid #fff;
    }

    li:hover, li:hover a {
        color: #fff;
        background-color: #2A7B9B;
    }

    .glyphicon {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .admin-panel-class {
        display: block;
        text-align: center;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

    li a {
        color: #333333;
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 10px;
    }

    li a:hover {
        text-decoration: none;
    }
}

.admin-panel-list {
    padding-left: 0;
    list-style: none;
    margin: auto;
}

@media (min-width:768px) {
	.admin-panel {
        li {
		    width: 25%;
		    font-size: 12px;
	    }
	}
}

@media (max-width:430px) {
	.admin-panel {
        li {
            float: none;
		    width: 100%;
		    font-size: 12px;
	    }
	}
}

HTML

<div class="admin-panel">
    <ul class="admin-panel-list">
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-list-alt"></span>
                <span class="admin-panel-class">My Workshops</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-star"></span>
                <span class="admin-panel-class">Create Workshop</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-pencil"></span>
                <span class="admin-panel-class">Edit Workshop</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-asterisk"></span>
                <span class="admin-panel-class">Resource Allocation</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-ok"></span>
                <span class="admin-panel-class">Reservation Approval</span>
            </a>
        </li>
        
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-stats"></span>
                <span class="admin-panel-class">Global Reports</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-phone"></span>
                <span class="admin-panel-class">Sing-In Tablets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-th-list"></span>
                <span class="admin-panel-class">Menu Editor</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="glyphicon glyphicon-user"></span>
                <span class="admin-panel-class">Edit Users</span>
            </a>
        </li>
    </ul>
</div>

JSFiddle





Esau Silva
Software Engineer at Region One ESC
Microsoft Full Stack Application Developer
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed.
Share