CSS only menu, click to disappear -


i have menu structured this:

<div class="nav">     <div class="drnav">         <ul class="ulmenu">             <li>                 <div class="menuheader">my home</div>                 <div class="menu-content">                     <ul>                         <li><a href="">item1</a></li>                         <li><a href="">item3</a></li>                     </ul>                 </div>             </li>             <li>                 <div class="menuheader">my stuff</div>                 <div class="menu-content">                     <ul>                         <li><a href="">item4</a></li>                         <li><a href="">item6</a></li>                     </ul>                 </div>             </li>         </ul>     </div> </div>

my css setup when hover on menuheader element menu-content element displayed (i.e. display: inline). works fine want when click 1 of links in list item elements within menu-content menu (i.e. parent menu-content element) disappears. of course want without javascript. saw 1 example used pointer-events restricts use ie 11 , i'd support @ least ie 10 if not 9 well. suggestions on how work?

technically it's possible, it's ado nothing (hard use in practice):

.ulmenu .menu-content {    display: none;  }  .ulmenu > li:hover .menu-content {    display: inline-block;  }  .ulmenu > li .menu-content:target {    display: none;  }
<div class="nav">      <div class="drnav">          <ul class="ulmenu">              <li>                  <div class="menuheader">my home</div>                  <div class="menu-content" id="menucontent_1">                      <ul>                          <li><a href="#menucontent_1">item1</a></li>                          <li><a href="#menucontent_1">item3</a></li>                      </ul>                  </div>              </li>              <li>                  <div class="menuheader">my stuff</div>                  <div class="menu-content" id="menucontent_2">                      <ul>                          <li><a href="#menucontent_2">item4</a></li>                          <li><a href="#menucontent_2">item5</a></li>                      </ul>                  </div>              </li>          </ul>      </div>  </div>

besides, once close menu way reopen opening , hovering initial one.

important note:

i point out having :hover based menu huge disadvantage compared having javascript based menu. because more half of today's traffic coming touch devices (and don't hover on touch-device, you?) while less 1% of traffic has javascript disabled.

so, perhaps explain why ask pure css solution? practical use pure css had in past 8 years payment gateway page, javascript strictly off. but, other that?

i happen know way around css, never keen on trying transfer dom manipulations css, instead of leaving them javascript. after all, that's javascript for. use right tool job. job here dom manipulation. use javascript.

here's input/label solution described in comments. realized don't have checkboxes, can use :focus state hide menu contents. it's still buggy, in sense click anywhere in page needed make :hover work again closed menu. it's closest can css or, @ least, that's think.

.menuheader input:focus + label,  .menuheader label {    display: none;  }  .menuheader:hover label  {    display: inline-block;  }  input.hidden {    position: absolute;    opacity: 0;    pointer-events: none;  }
<ul class="ulmenu">    <li>      <div class="menuheader">        <div>my home</div>        <input id="menucontent_1" class="hidden" type="text" />        <label class="menu-content" for="menucontent_1">          <ul>            <li><a href="#menucontent_1">item1</a></li>            <li><a href="#menucontent_1">item2</a></li>          </ul>        </label>      </div>    </li>    <li>      <div class="menuheader">        <div>my stuff</div>        <input id="menucontent_2" class="hidden" type="text" />        <label class="menu-content" for="menucontent_2">          <ul>            <li><a href="#menucontent_2">item4</a></li>            <li><a href="#menucontent_2">item5</a></li>          </ul>        </label>      </div>    </li>  </ul>


-

Comments

Post a Comment

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

Image
i'm using qt framework build graphical user interface. use qgridlayout position qwidgets neatly. gui looks this: my application regularly adds new widgets gui @ runtime. these new widgets not added @ end of qlayout, somewhere in middle. the procedure bit cumbersome. applied on figure above, need take out widg_c , widg_d , ... qgridlayout. next, add widg_x and widg_y , , put other widgets again. how remove widgets qgridlayout: for in reversed(range(mygridlayout.count())): self.itemat(i).widget().setparent(none) ### as long you're dealing small amount of widgets, procedure not disaster. in application display lot of small widgets - perhaps 50 or more! application freezes second while procedure ongoing, annoying user. there way insert widgets somewhere in qlayout, without need take out other widgets? edit: apparently solution qvboxlayout simple. use function insertwidget(..) instead of addwidget(..) . docs can found link: http://doc.qt.io/qt-5/qboxlayou
Read more

python - serve multiple gunicorn django instances under nginx ubuntu -

i need serve 2 webs apps (django) on gunicorn under different domain names using nginx on ubuntu. started using tutorial: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04 it worked fine 1 using that. tried same thing second gives me 502 gateway second domain. tried following tutorial: http://michal.karzynski.pl/blog/2013/10/29/serving-multiple-django-applications-with-nginx-gunicorn-supervisor/ i'm @ part run gunicorn start script: sudo bin/gunicorn_start i response: starting webuildblack root traceback (most recent call last): file "/home/devin/webuildblack/bin/gunicorn", line 7, in <module> gunicorn.app.wsgiapp import run importerror: no module named 'gunicorn.app'; 'gunicorn' not package you have named program gunicorn.py gunicorn -package. rename file , remove gunicorn.pyc file.
Read more

module - Prestashop displayPaymentReturn hook url -

i new prestashop developer , trying create paymentmodule. have got show payment method can not proceed purchase because not know hot works. does know should redirect run hooddisplaypaymentreturn method? i happy if explain me complete navigation map make purchase. anyway, can find relation between hooks , pages? when have new module payment rely on simplest provided prestashop: bankwire. inside can find 3 hooks. hookpayment: public function hookpayment($params) { if (!$this->active) return; if (!$this->checkcurrency($params['cart'])) return; $this->smarty->assign(array( 'this_path' => $this->_path, 'this_path_bw' => $this->_path, 'this_path_ssl' => tools::getshopdomainssl(true, true).__ps_base_uri__.'modules/'.$this->name.'/' )); return $this->display(__file__, 'payment.tpl'); } hookdisplaypaymenteu: public fun
Read more