Menutop annonce

by matmat

HTML

<div class="contenuWL">
    <div class="menuwrapper">
        <div class="menuannonceuser ">
            <div class="menuannonceheader1 h20">John Calagan aaaaaaaaaaaa</div>
            <div class="menuannonceheader2"><a href="#" target="_blank"><img src="http://www.junkst.com/Images/Avatars/8.jpg" style="border:0" src="" height="50" width="50"/></a>

            </div>
        </div>
        <div class="frame fpos h30"> <span class="helper"></span>

            <img src="http://www.junkst.com/Images/Icones/world.png" height="20" class="h20 w20"/>
            <p>Tout à: Sadillac</p>
        </div>
        <div class="fpos" style="left:320px;">
            <div class="frame h30"> <span class="helper"></span>

                <img src="http://www.junkst.com/Images/Icones/plus.png" height="20" class="h20 w20"/>
                <p>Tout dans: vélos</p>
            </div>
            <div class="frame fhid h30" style="left:290px;"> <span class="helper"></span>

                <img src="http://www.junkst.com/Images/Icones/plus.png" height="20" class="h20 w20" />
                <p>Vélo - Sadillac</p>
            </div>
            <div class="frame fhid h30" style="left:290px;"> <span class="helper"></span>

                <img src="http://www.junkst.com/Images/Icones/plus.png" height="20" class="h20 w20"/>
                <p>Vélo - Rhône</p>
            </div>
        </div>
    </div>


</div>

CSS

.h20{
    
    height:20px;
}
w20{
    
    width:20px;
}
.h30{
        height:30px;
}
.contenuWL {

    width:530px;
    position:relative;
    min-height:200px;
    margin-top:70px;
        background:whitesmoke;
}
.menuwrapper {
    position:relative;
    width:100%;
    margin:auto;
    border-top:1px solid gainsboro;
    background:;
    padding-bottom:80px;
        background:whitesmoke;
}
.menuannonceuser {
    width:110px;
    box-sizing:border-box;
    background:white;
    padding:10px;
    padding-top:5px;
    text-align:center;
    border:1px solid gainsboro;
    position:absolute;
    top:-50px;
    left:15px;
    display:inline-block;
}
.menuannonceheader1 {
    width:100%;
    font-family:calibri;
    font-size:14px;
    font-weight:bold;
    color:#ff7000;
    vertical-align:middle;
    overflow:hidden;
    text-overflow:elipsis;
    word-wrap:break-word;
    padding-bottom:5px;
}
.menuannonceheader2 {
    width:100%;
    height:60px;
}
.frame {
    
    width:100%;
    cursor:pointer;
    /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: left;
    padding:5px;
    background:white;
    border:1px solid gainsboro;
}
.fpos {
    position:absolute;
    top:-20px;
    left:140px;
}
.fhid {
    display:none;
}
.fshow {
    display:none;
}
.frame:hover {
    background:#990000;
}
.frame:hover img {
    opacity:0.4;
}
.frame:hover p {
    color:whitesmoke;
    font-weight:bold;
}
.frame p {
    padding-left:10px;
    font-family:calibri;
    color:#990000;
    font-size:12px;
    display:inline;
    cursor:pointer;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.frame img {
    vertical-align: middle;

}
.ligneSAGA1 {
    border-top:1px solid grey;
    width:100%;
    font-family: Constantia, Palatino, serif;
    margin-top:1px;
    padding:0px;
    margin:0px;
    z-index:2;
    margin-top:1px;
}

JavaScript

$(document.body).on('mouseenter', '.fpos', function (e) {

	    $(this).children('.fhid').slideToggle();
	    return false;
	});
	$(document.body).on('mouseleave', '.fpos', function (e) {

	    $(this).children('.fhid').slideToggle();
	    return false;
	});
	$(document.body).on('click', '.fpos', function (e) {
	    alert('yep');
	});