How can I make like this left side fly mouse over share?

Loganathan Natarajan
Loganathan Natarajan used Ask the Experts™
on
How can I create like this left side fly mouse over SHARE bar? http://www.chow.com/galleries/207/delicious-grilled-meats

ref. image also
side-left.JPG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Web Developer
Commented:
Here is the exact code what was used there:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#share_side_bar {
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
background-color:#777777;
left:0;
position:absolute;
top:200px;
width:66px;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
div, ul, ol, li, h1, h2, h3, h4, form, fieldset, input, select, option, label, td, th {
line-height:1.22em;
margin:0;
padding:0;
}
</style>
</head>

<body>
<ul id="share_side_bar" style="position: fixed; top: 20px; left: 0px;">
    <li id="share_bar_twitter" class="share_bar_item first">
		<iframe scrolling="no" frameborder="0" class="twitter-share-button twitter-count-horizontal" tabindex="0" allowtransparency="true" src="http://platform1.twitter.com/widgets/tweet_button.html?_=1305625458907&amp;count=vertical&amp;lang=en&amp;text=Delicious%20Grilled%20Meats&amp;url=http%3A%2F%2Fwww.chow.com%2Fgalleries%2F207%2Fdelicious-grilled-meats" style="width: 55px; height: 62px;" title="Twitter For Websites: Tweet Button"></iframe>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
	<li id="share_bar_fb" class="share_bar_item">
        <div id="share_bar_tab" style="display: none;"><img height="68" width="11" alt="share" src="/static/i/share_tab.png"></div>
		<fb:like href="http://www.chow.com/galleries/207/delicious-grilled-meats&amp;title=Delicious Grilled Meats" width="50" show_faces="false" layout="box_count" class=" fb_edge_widget_with_comment fb_iframe_widget"><span><iframe scrolling="no" id="faedcdbac9784e" name="f2a5dd426792758" style="border: medium none ; overflow: hidden; height: 60px; width: 55px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=&amp;channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D1%23cb%3Df3ced4b98b9a1ea%26origin%3Dhttp%253A%252F%252Fwww.chow.com%252Ff346b6cfa45cf64%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;href=http%3A%2F%2Fwww.chow.com%2Fgalleries%2F207%2Fdelicious-grilled-meats%26title%3DDelicious%20Grilled%20Meats&amp;layout=box_count&amp;locale=en_US&amp;node_type=link&amp;sdk=joey&amp;show_faces=false&amp;width=55"></iframe></span></fb:like>
    </li>
    <li id="share_bar_email" class="share_bar_item tac gigya_email"><a onclick="showGigya(this);return false" href="#" class="gigya_email_link"><img height="12" width="16" src="http://cdn.gigya.com/gs/i/Share/EmailIcon.png" alt="Email" class="gigya_email_img">Email</a></li>
    <li id="share_bar_gigya" class="share_bar_item tac last"><a onclick="showGigya('share_bar_gigya'); return false" class="f12 bold" href="#"><span class="f14 block">+</span>SHARE</a></li>
</ul>
</body>
</html>

Open in new window


So You can see the ul code is:
<ul id="share_side_bar" style="position: fixed; top: 20px; left: 0px;">

Open in new window

Which is position fixed so it is will not scroll with page and top:20px leave 20px space and left:0px attach the share side bar to left side.
On the #share_side_bar div you can see the top:with 200px margin which manage the top margin.

I hope you got your answer and you may solve your .........

Author

Commented:
thank you, i will look at it
Chris Harte2015 Top Expert (Most Article Points)

Commented:
They are called flyouts and are done with css.

http://www.cssplay.co.uk/menus/latest-flyout.html

If you give the left value a minus number (-60 in the case of your example), it will slide off the left side of the page.
Chris Harte2015 Top Expert (Most Article Points)

Commented:
Though this one is even better because it uses clicks instead of hovers.

http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial