How to make navigation bar expand while on click not on hover?

Question

Im new to programming, so pardon me if the questions is a bit basic.

Im making a web application. And I browse codepen for a menu bar that satisfy my need. And come up with a nice one : https://codepen.io/vichid/pen/cHnmK

The problem is, the sub menu is expand while on hover.

While what I want is, the sub menu expand only when I click the link menu.

here is the html code :

    <ul class="menu">
        <li>
            <a href="home.aspx">Beranda</a>
        </li>
        <li>
            <a href="#">Tabel</a>
            <ul class="sub-menu">
                <li><a href="MasterDepartemen.aspx">Departemen</a></li>
                <li><a href="MasterCabang.aspx">Cabang</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Pegawai</a>
            <ul class="sub-menu">
                <li><a href="MasterPegawai.aspx">Data Induk Pegawai</a></li>
                <li><a href="LaporanPegawai.aspx">Laporan Pegawai</a></li>
                <li><a href="MasterSlipGaji.aspx">Slip Gaji</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Pajak</a>
            <ul class="sub-menu">
                <li><a href="#">Parameter Pajak</a></li>
                <li><a href="#">Kalkulator Pajak</a></li>
                <li><a href="#">Perhitungan Manual</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Sistem</a>
            <ul class="sub-menu">
                <li><a href="MasterUser.aspx">Pengguna</a></li>
                <li><a href="#">Perusahaan</a></li>
            </ul>
        </li>
        <li>
            <a href="LogOut.aspx">Logout</a>
        </li>
    </ul>

and here is the CSS :

       <style class="cp-pen-styles">
       nav {
       /*
       position: absolute;
       top: 50%;
       left: 0;
       bottom: 50%;
       right: 0;
       */
       }

       ul.menu {
       width: 100%;
       height: 40px;
       line-height: 40px;
       position: relative;
       text-align: center;
       margin: auto;
       padding: auto;
       background-color: #DCE6F2;
       -moz-border-radius-topleft: 4px;
       -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
       -moz-border-radius-topright: 4px;
       -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
       }
       ul.menu li {
       float: left;
       width: auto;
       }
       ul.menu li a {
       display: block;
       width: auto;
       text-decoration: none;
       }
       ul.menu li:hover {
       background-color: #95B3D7;
       -moz-transition-property: background-color;
       -o-transition-property: background-color;
       -webkit-transition-property: background-color;
       transition-property: background-color;
       -moz-transition-duration: 0.33s;
       -o-transition-duration: 0.33s;
       -webkit-transition-duration: 0.33s;
       transition-duration: 0.33s;
       -moz-border-radius-topleft: 4px;
       -webkit-border-top-left-radius: 4px;
       border-top-left-radius: 4px;
       -moz-border-radius-topright: 4px;
       -webkit-border-top-right-radius: 4px;
       border-top-right-radius: 4px;
       }
       ul.menu li:hover ul {
       width: 100%;
       background: #95B3D7;
       visibility: visible;
       filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
       opacity: 1;
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
       transition-property: opacity;
       -moz-transition-duration: 0.33s;
       -o-transition-duration: 0.33s;
       -webkit-transition-duration: 0.33s;
       transition-duration: 0.33s;
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      }

      ul.sub-menu {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      visibility: hidden;
      display: block;
      position: absolute;
      left: 0;
      height: 40px;
      line-height: 40px;
      background-color: #95B3D7;
      }
      ul.sub-menu li:hover {
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
      }

      ul.menu a,
      ul.sub-menu a {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #0E0500;
      padding: 0 10px;
      }
      </style>

The above code make menu bar that expand its submenu while on hover, while I want is onclick (just onclick, not onhover and onclick guys...)

Any idea ?

Any help would be appreciated..... thank you.....

http://stackoverflow.com/questions/33026748/jquery-onclick-dropdown-menu — Sergio Alen, Feb 02 '17 at 02:30
Hey mate, welcome to the wonderful world of programming. CSS doesn't register click events so you'll need to use JavaScript to accomplish this. The link above seems to explain it well. — Clinton Green, Feb 02 '17 at 02:33
@ClintonGreen, you can hook into the `:focus` selector however ;) — haxxxton, Feb 02 '17 at 02:34
@haxxxton I thought about that here but is focus bulletproof? I've never used in that manner before. I thought it only worked 100% with form inputs. It would be very cool if this can replace an onClick. — Clinton Green, Feb 02 '17 at 02:40
@ClintonGreen, definitely cant replace an `onClick`, but it can be used in css to "select" elements. As per [this answer](http://stackoverflow.com/a/1600194/648350) there's no definite list of focusable elements, but you can counter that by adding the `tabindex` attribute to an element (see answer and my answer below) — haxxxton, Feb 02 '17 at 02:42

score 1 · Accepted Answer · edited May 23 '17 at 12:34

1

By leveraging the :focus property on the a sibling of the sub-menu we can use that instead of the parent li:hover to show/hide the sub-menu.

Natively, a tags with a defined href attribute can be focused (if you werent using an a you could add tabindex="-1" to an element to make it focusable). If you would like to know more about focus and tabindex have a look at this answer.

As this is a direct sibling of the ul.sub-menu, we can "select" it using the + sibling selector like so: a:focus + ul.sub-menu, and apply the appropriate styling to display the submenu.

SCSS

ul.menu{
    width: $menuWidth;
    height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    margin: auto; 
    padding: auto;
    background-color:$menuColor; 
    @include border-top-radius($borderRadius);

    li{
        float: left;
        width: auto;
        a{
            display: block;
            width: auto;
            text-decoration: none;
        }
        a:hover,
        a:focus
        {
            background-color:$subMenuColor;
            @include transition-property(background-color);
            @include transition-duration($duration);
            @include border-top-radius($borderRadius);
        }
        a:focus + ul,
        a + ul:hover{
            width: $menuWidth;
            background: $subMenuColor;
            visibility: visible; 
            @include opacity(1);
            @include transition-property(opacity);
            @include transition-duration($duration);
            @include border-bottom-radius($borderRadius);
        }
    }
}

CODEPEN

edited May 23 '17 at 12:34

Community

1
1

answered Feb 02 '17 at 02:37

haxxxton

6,422
3
27
57

Although it's an interesting approach, it looks like the child anchor elements wont trigger clicks, see this answer http://stackoverflow.com/questions/18903716/proper-way-to-show-drop-down-on-focus-with-css – Sergio Alen Feb 02 '17 at 02:46
@haxxxton the navigation bar is like what I want it to be designed. But there seems to be a new problem : the sub menu link wont work. It wont redirect to new page... – Andrew Alexander Feb 02 '17 at 03:04
@AndrewAlexander, updated to include a fix, Item 1, Sub Item 1 will link to google in the codepen example – haxxxton Feb 02 '17 at 03:10
@SergioAlen, added a fix to my code for this. Simply applying a `:hover` detect over the newly visible sub-menu allows it to remain open long enough to enact click events – haxxxton Feb 02 '17 at 03:12
Nice hack @haxxxton ;) – Sergio Alen Feb 02 '17 at 03:26
@haxxxton seems to work. But is it safe in all major browser (safari, chrome, IE) ? Mozilla is fine though – Andrew Alexander Feb 02 '17 at 03:27
@haxxxton one more questions. Your solution seems to work nicely. But, can I make the sub menu not disappear after I click the link (after redirect to the new page). Im using Master Page for this menubar. – Andrew Alexander Feb 20 '17 at 03:21
@AndrewAlexander, are you using a framework like angular/vue/react to handle page change? or does all the content on your page change when you navigate? In essence, you would 'detect' the current page when the new one loads.. then add a class to the corresponding 'parent' and 'child' navigation elements so that the nav bar stays open, and add that class to the css that makes the menu stay open (ie. the `a:focus + ul, a + ul:hover` css) – haxxxton Feb 20 '17 at 06:55
@haxxxton Im using MasterPage feature in .Net Framework. The menubar you created I placed it on that single MasterPage, so every other content page which using that masterpage all have the same menu. I think the master page is refreshing after every page load. – Andrew Alexander Feb 20 '17 at 08:21
Awesome. Im unsure of the way to detect current page using .NET but once you figure that out you just need to add something like an '.active' class to the parent and child. The youd add 'a.active + ul' to the list that makes the menu stay open – haxxxton Feb 20 '17 at 13:33

score 0 · Answer 2 · edited Oct 29 '18 at 07:34

You can do it simply with jQuery, HTML, and CSS.

<!DOCTYP html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
$(".list-p").click(function() {
var data = $(this).attr("data");
$(".list-s").hide();
$(".list-s-"+data+"").toggle();
});
});
</script>
</head>
<body>
<style>
body,html {margin:0;}
.menu {background:#555; height:40px;}
.menu ul,ol,dl {list-style:none; margin:0; padding:0;}
.menu li {float:left; margin:0 20px 0 0; padding:10px; border-right:1px #000 solid; position:relative;}
.menu li:last-child {margin-right:0; border-right:0;}
.menu span {color:#fff; text-decoration:none;}
.list-s {position:absolute; background:#555; left:0; width:150px; top:42px; display:none;}
.list-s ol{padding:10px; border-bottom:1px #000 solid;}
a {color:#fff;}
</style>
<div id="menu">
<div class="menu">
<ul>
<li><span class="list-p" data="1">list-p-1</span>
<dl class="list-s-1 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="2">list-p-2</span>
<dl class="list-s-2 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="3">list-p-3</span>
<dl class="list-s-3 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
<li><span class="list-p" data="4">list-p-4</span>
<dl class="list-s-4 list-s">
<ol><a href="">list-s-1</a></ol>
<ol><a href="">list-s-2</a></ol>
<ol><a href="">list-s-3</a></ol>
</dl>
</li>
</ul>
</div>
</div>
</body>
</html>

How to make navigation bar expand while on click not on hover?

2 Answers2