diff options
| author | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-03-08 00:47:11 +0100 |
|---|---|---|
| committer | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-03-08 00:47:11 +0100 |
| commit | 5d83d3987a0ac05d0ea79606e299f66de4f2c9fb (patch) | |
| tree | 72588a017ad1fab522be5a95891bdef776774259 /dropdown-navbar.html | |
| parent | 7fdcd3d8ad60c8e0acc115b52d2ae18ef0f75cc9 (diff) | |
| download | web-common-5d83d3987a0ac05d0ea79606e299f66de4f2c9fb.tar.gz web-common-5d83d3987a0ac05d0ea79606e299f66de4f2c9fb.tar.bz2 web-common-5d83d3987a0ac05d0ea79606e299f66de4f2c9fb.zip | |
adding hook which populates 'onlick' attributes for
navbar elements
Diffstat (limited to 'dropdown-navbar.html')
| -rw-r--r-- | dropdown-navbar.html | 33 |
1 files changed, 24 insertions, 9 deletions
diff --git a/dropdown-navbar.html b/dropdown-navbar.html index d8dfb60..9036018 100644 --- a/dropdown-navbar.html +++ b/dropdown-navbar.html @@ -11,9 +11,14 @@ .dropdown-navbar ul li { float: left; } + .dropdown-content { + position: absolute; + display: none; + } .dropdown-navbar ul li a { text-decoration: none; display: inline-block; + position: relative; padding: 14px 16px } .show { @@ -21,30 +26,40 @@ } </style> <script type="application/javascript"> - dropMenu(){ + function injectOnclicks(){ + var where = ["shop", "blog", "bank", "landing"]; + for (i in where){ + document.getElementById(where[i]).onclick = function(){ + alert(this.parentNode.getElementByTagName("div")[0]); + this.parentNode.lastChild.classList.toggle(show); + } + } + } + function dropMenu(){ } + document.addEventListener('DOMContentLoaded', injectOnclicks); </script> </head> <div class="dropdown-navbar"> <ul> <li> - <a href="/shop">Shop</a> - <div class="dropdown-content"> + <a href="" id="shop">Shop</a> + <div class="dropdown-content shop"> <a href="#">#</a> </div> </li> <li> - <a href="/blog">Blog</a> - <div class="dropdown-content"></div> + <a href="" id="blog">Blog</a> + <div class="dropdown-content blog"></div> </li> <li> - <a href="/bank">Bank</a> - <div class="dropdown-content"></div> + <a href="" id="bank">Bank</a> + <div class="dropdown-content bank"></div> </li> <li> - <a href="/landing">Landing</a> - <div class="dropdown-content"></div> + <a href="" id="landing">Landing</a> + <div class="dropdown-content landing"></div> </li> </ul> </div> |