Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

How to Build Fixed Full height CSS Sidebar Menu with Submenu

Ashfaq Ahmed by Ashfaq Ahmed
January 13, 2020
in How To
2
How to Build Fixed Full height CSS Sidebar Menu with Submenu
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Today, we will show you the best example of a sidebar menu with submenu using CSS and a bit of JavaScript.This menu builds in full height which will always be fixed at the left side of the content area.

When the user clicks on the hamburger button, The menu will accessible to click. By default, the navigation menu text will be hidden and a small strip will show with icons.

The menu also has the functionality of hiding or how with one click hamburger button. Design navigation is awesome and eye-catching. It is intended as the vertical menu which is perfect for the sidebar to use. It does have not only a submenu but also the Multi-Level Dropdown Menu.

HTML Structure for Sidebar Menu with Submenu

Let’s have a look at the HTML/CSS, but before we go ahead, you make sure to add the main query file to make it work. Also the Font Awesome need to be added for icons.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

Ok, Here is the rest of the complete HTML.

<div class="page-container">
  <div class="content">
    <h2>Page content</h2>
  </div>
  <div class="sidebar-menu">
    
    <header class="logo">
      <a href="#" class="sidebar-icon">
        <span class="fa fa-bars"></span>
      </a>
      <a href="#">
        <span id="logo" class="fa fa-codepen fa-5x"></span>
        <!--<img id="logo" src="" alt="Logo"/>-->
      </a>                    
    </header>

    <div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>

    <div class="menu">
      <ul id="menu" >
        <li id="menu-home" ><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li id="menu-comunicacao" ><a href="#"><i class="fa fa-envelope"></i><span>Comunicação</span><span class="fa fa-angle-double-right" style="float: right"></span></a>
            <ul id="menu-comunicacao-sub" >
                <li id="menu-mensagens" style="width: 120px" ><a href="#">Mensagens<i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a>
                    <ul id="menu-mensagens-sub" >
                        <li id="menu-mensagens-enviadas" ><a href="#">Enviados</a></li>
                        <li id="menu-mensagens-recebidas" ><a href="#">Recebidos</a></li>
                        <li id="menu-mensagens-nova" ><a href="#">Nova Mensagem</a></li>
                    </ul>
                </li>
                <li id="menu-arquivos" ><a href="#">Arquivos</a></li>
            </ul>
        </li>
        <li id="menu-academico" ><a href="#"><i class="fa fa-graduation-cap"></i><span>Acadêmico</span><span class="fa fa-angle-right" style="float: right"></span></a>
            <ul id="menu-academico-sub" >				
                <li id="menu-academico-avaliacoes" ><a href="#">Avaliações</a></li>
                <li id="menu-academico-boletim" ><a href="#">Boletim</a></li>
            </ul>
        </li>
        <li><a href="#"><i class="fa fa-table"></i><span>Agenda</span><span class="fa fa-angle-right" style="float: right"></span></a>
            <ul>				
                <li><a href="#">Avaliações Agendadas</a></li>
                <li><a href="#">Faltas</a></li>
                <li><a href="#">Calendário</a></li>
            </ul>
        </li>
        <li><a href="#"><i class="fa fa-history"></i><span>Rematrícula</span></a></li>
        <li><a href="#"><i class="fa fa-gears"></i><span>Dados Cadastrais</span></a></li>
        <li><a href="#"><i class="fa fa-institution"></i><span>Instituição</span><span class="fa fa-angle-right" style="float: right"></span></a>
            <ul>				
                <li><a href="#">Relação de Alunos</a></li>
                <li><a href="#">Relação de Professores</a></li>
                <li><a href="#">Plano de Ensino</a></li>
                <li><a href="#">Pagamentos Pendentes</a></li>
                <li><a href="#">Mapa</a></li>
            </ul>
        </li>
    </ul>
    </div>
  </div>
</div>

CSS Style for Menu

The CSS is a bit longer similar to HTML, but I have mention complete CSS here.

@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body
{
    height: 100%;
    font-family: "Roboto";
    background: #eeeeee;
}

a, a:hover, a:active
{
    text-decoration: none;
}

a
{
    color: #008DE7;
    font-style: italic;
    font-weight: 700;
}

a:hover
{
    transition: all 200ms ease-in-out;
}

.page-container
{    
    min-width: 1260px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
}

.content
{
    max-width: 800px;
    min-width: 600px;
    display: block;
    padding: 50px;
    margin: 50px auto;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    overflow: hidden;
}

.page-container.sidebar-collapsed
{
    padding-left: 65px;
    transition: all 100ms linear;
    transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back
{
    padding-left: 280px;
    transition: all 100ms linear;
}

.page-container.sidebar-collapsed .sidebar-menu
{
    width: 65px;
    transition: all 100ms ease-in-out;
    transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .sidebar-menu
{
    width: 280px;
    transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed .sidebar-icon
{
    transform: rotate(90deg);
    transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed-back .sidebar-icon
{
    transform: rotate(0deg);
    transition: all 300ms ease-in-out;
}

.page-container.sidebar-collapsed .logo
{
    padding: 21px;
    height: 136px;
    box-sizing: border-box;
    transition: all 100ms ease-in-out;
    transition-delay: 300ms;
}

.page-container.sidebar-collapsed-back .logo
{
    width: 100%; 
    padding: 21px;
    height: 136px;  
    box-sizing: border-box;
    transition: all 100ms ease-in-out;
}

.page-container.sidebar-collapsed #logo
{
    opacity: 0;
    transition: all 200ms ease-in-out;
}

.page-container.sidebar-collapsed-back #logo
{
    opacity: 1;
    transition: all 200ms ease-in-out;
    transition-delay: 300ms;
}

.page-container.sidebar-collapsed #menu span
{
    opacity: 0;
    transition: all 50ms linear;
}

.page-container.sidebar-collapsed-back #menu span
{
    opacity: 1;
    transition: all 200ms linear;
    transition-delay: 300ms;
}

.sidebar-menu
{
    position: fixed;
    float: left;
    width: 280px;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #303641;
    color: #aaabae;
    font-family: "Segoe UI";
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#menu
{
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

#menu li 
{
    position: relative;
    margin: 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(69, 74, 84, 0.7);
    padding: 0;
}

#menu ul
{
    opacity: 0;
    height: 0px;
}

#menu li a 
{
    font-style: normal;
    font-weight: 400;                
    position: relative;
    display: block;
    padding: 10px 20px;
    color: #aaabae;
    white-space: nowrap;
    z-index: 2;
}

#menu li a:hover
{
    color: #ffffff;
    background-color: #333944;
    transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
}

#menu li.active > a
{
    background-color: #2b303a;
    color: #ffffff;
}

#menu ul li
{
    background-color: #2b303a;
}

#menu ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu li ul 
{
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -1px;
    background-color: #2b303a;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.1s linear;
    border-top: 1px solid rgba(69, 74, 84, 0.7);
}

#menu li:hover > ul 
{
    visibility: visible;
    opacity: 1;
}

#menu li li ul 
{
    left: 100%;
    visibility: hidden;
    top: -1px;
    opacity: 0;
    transition: opacity 0.1s linear;
}

#menu li li:hover ul 
{
    visibility: visible;
    opacity: 1;
}

#menu .fa
{
    margin-right: 5px;
}

.logo
{
    width: 100%; 
    padding: 21px;
    box-sizing: border-box;
}

.sidebar-icon
{
    position: relative;
    float: right;
    margin-top: 32px;
    border: 1px solid #454a54;
    text-align: center;
    line-height: 1;
    font-size: 18px;
    padding: 6px 8px;
    border-radius: 3px;
    color: #888;
    background-clip: padding-box;
    text-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}

/*#logo
{
    width: 150px;
    height: 64px;
    vertical-align: middle;
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
}*/

.fa-codepen
{
  color: #fff;
  margin-left: 50px;
}

After that, you need to add Javascript which is here.

var toggle = true;
            
$(".sidebar-icon").click(function() {                
  if (toggle)
  {
    $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
    $("#menu span").css({"position":"absolute"});
  }
  else
  {
    $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
    setTimeout(function() {
      $("#menu span").css({"position":"relative"});
    }, 400);
}
    
    toggle = !toggle;
});

That’s all! have a look at the demo page of this CSS sidebar menu with submenu.

See the Pen GvpJg by Rodrigo Manske (@rodrigomanske) on CodePen.

Enjoy that beautiful navigation and keep sharing with friends on Facebook or Twitter.

Previous Post

Pure CSS Image Slider with Thumbnails

Next Post

How to Make Responsive Fullscreen Background Images

Next Post
How to Make Responsive Fullscreen Background Images

How to Make Responsive Fullscreen Background Images

Comments 2

  1. John says:
    3 years ago

    when screen height is small, sumenus are not shown correctly.

    Reply
    • Muhammad Asif says:
      3 years ago

      Hi John!
      Thanks for your feedback, please let me know which element not display properly?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.