Solved

Help with CSS

Posted on 2014-04-09
2
216 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 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