how to create facebook like dilog boxes ?

@the-small-k • Oct 19, 2024

Oct 19, 2024

1.1K

Hello friend's
Any one have idea what technology facebook utilize to create the drop down box what we see on clicking our notifications.
Is it possible to create such like design using css only ?

Like 0 Replies 8

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

CrazyEngineers powered by Jatra Community Platform

eternalthinker

@eternalthinker-Kvsi5Y • Jan 31, 2012

CSS and bit of jQuery should do it without much hassle
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Feb 2, 2012

Try jQuery Boxy: #-Link-Snipped-#
eternalthinker

@eternalthinker-Kvsi5Y • Feb 3, 2012

Praveen-Kumar
Try jQuery Boxy: #-Link-Snipped-#
That's a good find! 😀

Anyhow, if he needs only static dialogue boxes with just a close button, I think writing some CSS and a couple of lines of jQuery would be more light weight.
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Feb 3, 2012

Will send you one with even more light weight then... Behold.! 😀
The_Small_k

@the-small-k • Feb 3, 2012

I have done it guy's.
Have to add some css scripts on it nothing else.
PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Feb 4, 2012

The_Small_k
I have done it guy's.
Just have to add some css scripts on it nothing else.
Awesome!!! Show the demo!!! 😁 What did you use? Boxy???

The_Small_k

@the-small-k • Feb 4, 2012

ok try this one....
save this code in a file as style.css and link them to your html page

body {
    margin:0 auto;
}
#content {
    margin:0 auto;
    background-color:red;
}
#nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:4px;
}
#nav a {
    display:block;
    padding:7px 7px 7px 7px;
    color:#ccc;
    text-decoration:none;
}
 
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
}
 
#nav a.dmenu {
 
}
 
#nav a.dmenu:hover {
    color:#3366CC !important;
    background-color: #fff;
}
 
#nav li:hover a, #nav a:focus,
#nav a:active {
    padding:7px 7px 7px 7px;
    color:#fff;
    background:#444;
    text-decoration:none;
}
#nav li ul{
    position: absolute;
    display: none;
    margin-left:-1px;
    padding-bottom:10px;
    background-color: #FFFFFF;
    border: 1px solid #bbb;
    border-top:none;
    -moz-box-shadow: 0 0 5px #ddd;
    -webkit-box-shadow: 0 0 5px #ddd;
    box-shadow: 0 0 5px #ddd;
    z-index:5000;
    height:500px;
    width:200px;
}
#nav li:hover ul {
    display: block;
}
#nav li {position: static; width: auto;}
 
#nav li:hover ul a{
    color: #000000;
    background-color: transparent;
}
 
#nav ul a:hover {
    background-color: #606060;
    color: #FFFFFF;
}
 
.floatleft {
    float:left;
}

here is the html page...

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul id="nav" class="floatleft">
        <li class="dmenu">[url=#]Demo[/url]
            <ul>
                [*][url=#]First Option[/url]
                [*][url=#]Second Option[/url]
                [*][url=#]<image src="mohit.jpg" height="100px" width="100px"></image>[/url]
                [*][url=#]Third Option[/url]
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

PraveenKumar Purushothaman

@praveenkumar-66Ze92 • Feb 4, 2012

Is it a mouseover drop down menu you posted??? I thought you said facebook like post... 😐