Solved

Help with CSS

Posted on 2014-04-09
2
214 Views
Last Modified: 2014-04-20
I'd really like to pull off something like this in CSS with the Google+, Twtitter and linked in fixed left side menu bar. Even to the point where it waits a few seconds and then glides in on page load.

http://www.givainc.com/
0
Comment
Question by:thenrich
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39990661
I have something similar answered here http:Q_28370433.html#a39876417

http://jsbin.com/vezilasu/1/edit
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>Padas </title>
</head>
<body>
<div class="main">
  <div id="menu_button" class="closed">Open</div>
  <p><a href="http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28370433.html#a39875831">http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28370433.html#a39875831</a></p>
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper, justo sit amet scelerisque vulputate, libero augue aliquet velit, eget ultrices magna sapien ut velit. Sed consectetur ante eget felis dictum, eu pellentesque leo pellentesque. Nunc ut tincidunt massa, vel cursus dolor. Fusce faucibus iaculis turpis non aliquam. Sed ullamcorper ultrices diam vitae convallis. Sed tincidunt eleifend hendrerit. Suspendisse scelerisque rhoncus pulvinar.
  </p><p>
In bibendum tempus blandit. Aenean in sem id nisi congue scelerisque nec sed erat. Donec fermentum nisl a eros vehicula, ac fringilla nisl luctus. In faucibus euismod purus eget hendrerit. Vestibulum condimentum est erat, ut laoreet nulla dictum id. Phasellus sit amet pulvinar tellus. Aenean leo enim, volutpat vel vehicula in, condimentum sit amet tortor. Nunc quis nulla erat. Aliquam commodo eget erat ut tristique. Quisque imperdiet scelerisque eros, quis euismod leo ornare in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis fermentum mauris vitae massa vestibulum, pellentesque rutrum nisi gravida. Cras ut lorem congue, elementum ante id, euismod odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sed porta mi. Etiam ullamcorper tincidunt felis eget sollicitudin.
  </p><p>
Nulla mattis nunc condimentum varius interdum. Aenean lorem elit, sagittis nec aliquet in, vehicula sit amet lectus. Donec sodales pellentesque sem id cursus. Nulla dictum hendrerit nibh, non aliquet massa imperdiet vel. Nunc auctor tellus a orci sollicitudin posuere. Ut mi turpis, pretium bibendum augue nec, sagittis convallis libero. Vivamus quis viverra elit, ut congue nisl.
  </p><p>
Nam ut tellus viverra, venenatis lacus scelerisque, euismod libero. In hac habitasse platea dictumst. Donec nec convallis lectus, ut fringilla mi. Vivamus fringilla sodales risus, in ornare quam consequat consectetur. Donec at volutpat risus, non posuere urna. Cras orci lectus, vulputate in leo pulvinar, ullamcorper porttitor leo. Nam luctus, felis vitae adipiscing varius, sem tellus tempor massa, ac porttitor ipsum odio ac augue.
  </p><p>
Curabitur orci risus, porta gravida rutrum nec, luctus ac mauris. Phasellus euismod nulla ligula, vel iaculis mauris placerat id. Etiam egestas venenatis sem, eu laoreet lorem semper ut. Donec varius vehicula malesuada. Ut ac cursus odio. Ut varius ligula quis rutrum vulputate. Ut vehicula nunc eu rhoncus tempus.
  </p>

  
  </div>
  <div id="menu">
    one<br>two<br>three
  </div>
</body>
</html>

Open in new window

#menu_button{
  background-color:rgba(0,0,0,.8);
  color:white;
  padding-top:10px;
  padding-left:3px;
  width:50px;
  height:30px;
  position:fixed;
  left:0px;
  top:100px;
}
#menu_button:hover{
  background-color:red;
  cursor:pointer;
  
}
#menu{
  display:none;
  background-color:black;
  color:white;
  line-height:20px;
  position:fixed;
  left:-150px;
  top:150px;
  width:120px;
  padding:20px;
}

Open in new window

$( document ).ready(function() {
$("#menu_button").click(function () {

    if ($(this).attr('class') === 'closed') {
        $('#menu').show();
        $("#menu").animate({
            "left": "+=150px"
        }, "slow");
        $('#menu_button').removeClass('closed').addClass('open').text('Close');
    } else {
        $("#menu").animate({
            "left": "-=150px"
        }, "slow", function () {
            $("#menu").hide();
        });
        $('#menu_button').removeClass('open').addClass('closed').text('Open');
    }
});
});

Open in new window

0
 
LVL 5

Author Closing Comment

by:thenrich
ID: 40011988
very cool! thx
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question