Single menu css like facebook alerts?

Question

I need to do a menu like this:

I try to use ul li but I think it is not the way to do that. (i think facebook and even stackoverflow uses a div, maybe).

<div class="list-wrapper">
    <ul class="items">
        <li>stackoverflow</li>
        <li>superuser</li>
        <li>serverfault</li>
    </ul>
</div>

css

.list-wrapper,
.items {
   display: inline-block;
}

.list-wrapper {
    position: relative;
    background-color: blue;
    height: 1em;
}

.items {
    position: absolute;
    background-color: red;
}

.items > li:first-child ~ li {
    display: none;
}

.items:hover > li:first-child ~ li {
    display: block;
}

http://jsfiddle.net/f7rr390k/ but my menu is on hover, I want one to click.

my question is: is it a simple ul li menu? or it uses another method?

any good examples to share?

You would need a simple javascript to add a class, or some CSS directly, and a click listener. — turbopipp, Sep 29 '15 at 07:46
CSS does not have an onlclick event handler. You have to use Javascript. — akash, Sep 29 '15 at 07:49
possible duplicate of [Show / hide div on click with CSS](http://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css) — akash, Sep 29 '15 at 07:49
Here is the example of dropdown menu only using css - http://webdesignerwall.com/tutorials/css3-dropdown-menu. Hope this helps. — Ranjana, Sep 29 '15 at 07:49

Z. Clément · Accepted Answer · 2015-09-29T08:00:24.543

1

I think you can use if you want only css :

    .items:active > li:first-child ~ li {
    display: block;
}

but that will not persist.

So use javascript/Jquery with this :

    $( ".items" ).click(function() {
    if (  $( ".onglet" ).css( "display" ) == 'none' ){
        $(".onglet").css("display","block");
    } else {
        $(".onglet").css("display","none" );
    }
});

with this html :

<div class="list-wrapper">
<ul class="items">
    <li id="title">menu</li>
    <li class="onglet">item 1</li>
    <li class="onglet">item 2</li>
</ul>

remove this from your css :

    .item:hover > li:first-child ~ li {
display:block;
}

edited Sep 29 '15 at 08:00

answered Sep 29 '15 at 07:56

Z. Clément

474
4
15

ok let me know if it s okay. it's a simple example I think you can improve it after. – Z. Clément Sep 29 '15 at 08:02
http://jsfiddle.net/f7rr390k/1/ it is nice! thank you. but it appears that facebook uses a div inside the ul or something... can I put an div there to use an scrollbar? – RGS Sep 29 '15 at 08:04
Yes it's a question about architecture of your html. You can do it with ul just limit the maximum heigth of your menu and use the overflow propriety for the container of your menu. ps : Facebook use div and no ul because I think they used libraries or framework to support the developpement of the site. – Z. Clément Sep 29 '15 at 08:08
Yes just add in your css for the .items a max-height property and a overflow :scroll property. – Z. Clément Sep 29 '15 at 08:16

Single menu css like facebook alerts?

1 Answers1