A Pen by kaushalya.

index.html

<div class="f1">
  <div class="f11">
    <div class="f111">
    <img src="http://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_white.png" alt="" class="f1img" />
      </div>
    <div class="f1src">
    <form action="#"><input type="text" placeholder="Type to search for People, Places And Things." class="src1" /></form>
    </div>
    <div class="f1sep">|&nbsp;</div>
    <div class="f1stng"></div>
    <div class="f1prpl"></div>
    <div class="f1sep">|</div>
    <div class="f1hm">Home</div>
    <div class="f1sep">|</div>
    <div class="f1ppic"></div>
    <div class="f1sep">|</div>
    <div class="f1ntf"></div>
    <div class="f1msg"></div>
    <div class="f1frn"></div>
    <div class="f1sep">|</div>
  </div>
</div>
<div class="frreq">  
   <div class="upar"></div>
  <div class="mainbox">
    <div class="fr">Friend requests</div>
    <div class="fr1">Find friends - Settings</div>
    <br />
    <div class="fr2">No new requests</div>
    <br />
    <div class="fr3">
    People You May Know</div><hr class="line" />
    <div class="fr4">
      <img src="http://4.bp.blogspot.com/-kgjwtvBlauw/UXZgf3i71PI/AAAAAAAAAqQ/MOSsYGT4HTQ/s1600/swami-vivekananda-003.jpg" alt="" class="frrimg"/>
      <div class="frrnm">Kanu Soni</div>
      <div class="frrmf">1 mutual friend</div>
      <div class="frradd">+Add friend</div>
    </div><hr class="line" />
 <div class="fr4">
      <img src="http://4.bp.blogspot.com/-kgjwtvBlauw/UXZgf3i71PI/AAAAAAAAAqQ/MOSsYGT4HTQ/s1600/swami-vivekananda-003.jpg" alt="" class="frrimg"/>
      <div class="frrnm">Niles Soni</div>
      <div class="frrmf">5 mutual friend</div>
      <div class="frradd">+Add friend</div>
    </div> <hr class="line" />    
    <div class="fr4">
      <img src="http://4.bp.blogspot.com/-kgjwtvBlauw/UXZgf3i71PI/AAAAAAAAAqQ/MOSsYGT4HTQ/s1600/swami-vivekananda-003.jpg" alt="" class="frrimg"/>
      <div class="frrnm">Raj Parmar</div>
      <div class="frrmf">6 mutual friend</div>
      <div class="frradd">+Add friend</div>
    </div> <hr class="line" />  
    <div class="fr4">
      <img src="http://4.bp.blogspot.com/-kgjwtvBlauw/UXZgf3i71PI/AAAAAAAAAqQ/MOSsYGT4HTQ/s1600/swami-vivekananda-003.jpg" alt="" class="frrimg"/>
      <div class="frrnm">Halvika Thole</div>
      <div class="frrmf">2 mutual friend</div>
      <div class="frradd">+Add friend</div>
    </div> <hr class="line" />  
    <div class="fr4">
      <img src="http://4.bp.blogspot.com/-kgjwtvBlauw/UXZgf3i71PI/AAAAAAAAAqQ/MOSsYGT4HTQ/s1600/swami-vivekananda-003.jpg" alt="" class="frrimg"/>
      <div class="frrnm">Manoj Kumar</div>
      <div class="frrmf">8 mutual friend</div>
      <div class="frradd">+Add friend</div>
    </div> 
  </div>
</div>
<div class="grphexpn">
  <div class="i1">
    <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">My Friends</div></div>
  <div class="i2">
    <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">Photos of My Friends</div></div>
  <div class="i3">
  <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">Restaurants nearby</div></div>
  <div class="i4">
  <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">Games my friend play</div></div>
  <div class="i5">
  <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">Photos I have like</div></div>
  <div class="i6">
  <img src="http://www.cms.gov.jm/sites/default/files/images/executive_team/profile_icon.png" alt="friend_icon" class="frndicon"/>
    <div class="frn1">Music my friends like</div></div>
</div>

script.js

/*
BY KRMAN.
*/
/*
Inspired by Facebook(can't do without facebook).
More features coming soon.
JSK ONS.
Not forget to hover,active and focus.
*/
$(".f1frn").click(function(){
  $(".frreq").toggle();
  $(".f1frn").toggleClass("f1frn1");
});
$(".f1src").click(function(){
  $(".grphexpn").toggle();
});

Simple-but-improved-fb-graph-search.markdown

Simple but improved fb graph search

Simple and improved from http://codepen.io/kman/pen/cGlKe. Tried to do my best. Html and css and jquery. Graph search expand.

A Pen by kaushalya on CodePen.

License.

style.css

body
{
  background: #eee;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
*
{
  transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -mos-transition: .5s ease-in-out;
}
.f1
{
  width: 100%;
  height: 40px;
  background: rgb(76,102,164);
  position: absolute;
  top: 0;
  left: 0;
}
.f11 div
{
  display: inline-block;
}
.f1img
{
  margin-top: 8px;
  margin-left: 2px;
  width: 25px;
}
.f1src
{
  position: absolute;
  top: 8px;
  margin-left: 7px;
}
.src1
{
  width: 550px;
  background: transparent;  
  border: 0;
  font-size: 19px;
  color: #fff;
}
.f1frn
{
  float: right;
  width: 21px;
  height: 21px;
  background: url(http://1.bp.blogspot.com/-bwA3TwS61fI/UTsw2R42SGI/AAAAAAAAAd0/v22y25V0EWA/s1600/friendon.png) no-repeat;
  padding: 9px 8px;
  margin-top: 7px;
}
.f1msg
{
  float: right;
  width: 21px;
  height: 21px;
  background: url(http://4.bp.blogspot.com/-klNGe6xfJlA/UTsw3JjtEtI/AAAAAAAAAeI/DUgPiqYnxC4/s1600/messageon.png) no-repeat;
  padding: 9px 7px;
  margin-top: 6px;
}
.f1ntf
{
  float: right;
  width: 21px;
  height: 21px;
  background: url(http://2.bp.blogspot.com/-HZz-m2Y73nE/UTsw3BTSTtI/AAAAAAAAAeM/APl5cKdI8xw/s1600/ntfon.png) no-repeat;
  padding: 9px 4px;
  margin-top: 9px;
}
.f1sep
{
  float: right;
  font-size: 30px;
  color: rgba(134,134,134,.26);
}
.f1ppic
{
  float: right;
  width: 22px;
  height: 22px;
  background: url(http://1.bp.blogspot.com/-z5LV2lk7jJk/UTs169DwKYI/AAAAAAAAAes/bLs63a7TCVU/s1600/371856_100002375160564_670012533_q.jpg) no-repeat ;
  margin: 7px;
  margin-top: 10px;
}
.f1hm
{
  float: right;
  color: #ddd;
  font: normal 17px 'Open sans',sans-serif;
  margin: 7px;
  margin-top: 10px;
  opacity: 0.5;
}
.f1prpl
{
  float: right;
  width: 15px;
  height: 12px;
  background: url(http://4.bp.blogspot.com/-9eg55eeLzO8/UTs6UT75r1I/AAAAAAAAAe4/8GqXwLtg3D0/s1600/privacy.png) no-repeat;  
  margin: 7px;
  margin-top: 17px;
  opacity: 0.7;
}
.f1stng
{
  float: right;
  background: url(http://3.bp.blogspot.com/-4hkr9mwPdzw/UTs7ojBR0hI/AAAAAAAAAfE/OJPi1orZ4EI/s1600/setting.png);
  padding: 9px 7px;
  margin: 7px;
  margin-top: 14px;  
  opacity: 0.7;
}
.f11 div
{
  cursor: pointer;
}
/*   Hover  , Focus  */
.f1stng:hover,.f1prpl:hover,.f1hm:hover
{
  opacity: 1;
}
.f1frn:hover,.f1frn1
{
  background: url(http://4.bp.blogspot.com/-H0orklwy4uk/UTsw2YzRdlI/AAAAAAAAAdw/TB5nfPDwTHY/s1600/friend.png) no-repeat; 
}
.f1ntf:hover,.f1ntf1
{
  background: url(http://3.bp.blogspot.com/-Vxv2FoNMfxw/UTsw23Gj46I/AAAAAAAAAeE/w_010bY2GGE/s1600/ntf.png) no-repeat;
}
.f1msg:hover,.f1msg1
{
  background: url(http://4.bp.blogspot.com/-f8ddz6z0Zi8/UTsw2Txz3OI/AAAAAAAAAd4/vsFp9Ci-E2g/s1600/message.png) no-repeat;
}
.src1:hover
{
  opacity: .3;
}
.src1:focus
{
  opacity: 1;
}

/*    Toggle friend requests     */
.frreq div
{
  display: inline-block;
}
.frreq
{
  display: none;
  position: absolute;
  right: 70px;
  top: 32px;
}
.upar
{
  height: 0;  width: 0; position: absolute; border-left: 12px solid transparent; border-right: 12px solid transparent;  border-bottom: 12px solid #fff; right: 182px;
  margin-top: -2px;
}
.mainbox
{
  width: 370px;
  background: #fff;
  border: 1px solid rgba(25,25,25,.3);
  margin-top: 8px;
  font: bold 11px 'Tahoma';
}
.fr,.fr1
{
  padding: 5px;
}
.fr1
{
  cursor: pointer;
  float: right;
  color: rgb(59, 89, 152);
}
.line
{
  color: #999;
  opacity: 0.5;
}
.fr2
{
  cursor: default;
  background: #e2e2e2;
  color: #777;
  width: 370px;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  text-align: center;
  padding: 12px 0;
}
.fr3
{
  cursor: default;
  padding: 5px;
}
.line
{
  margin-top: 0px;
  opacity: .4;
}
.fr4
{
  padding: 7px;
}
.frrimg
{
  cursor: pointer;
  width: 35px;
}
.frrnm
{
  cursor: pointer;
  color: rgb(59, 89, 152);
  position: relative;
  left: 10px;
  top: -22px;
}
.frrmf
{
  cursor: pointer;
  color: rgb(59, 89, 152);
  position: absolute;
  left: 55px;
  font: normal 11px 'Tahoma';  
  color: grey;
  margin-top: 25px;
}
.frradd
{
  cursor: pointer;
  background: #eee;
  border: 1px solid #999;
  padding: 4px;
  position: absolute;
  right: 10px;  
  margin-top: -35px;
}
/*        Graph expand        */
.grphexpn
{
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background: #fff;
}
.grphexpn div
{
  display: inline-block;    
}
.frndicon
{
  width: 40px;
  height: 40px;
  margin-left: 22px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.frn1
{
  font: normal 15px 'Tahoma';
  color: #000;
  position: absolute;
  margin-top: 15px;
  margin-left: 7px;
}
.i1,.i2,.i3,.i4,.i5,.i6
{  
  cursor: pointer;
  width: 100%;
  border-bottom: 1px solid grey;
}
.i1:hover,.i2:hover,.i3:hover,.i4:hover,.i5:hover,.i6:hover
{
  background: rgba(50,50,50,0.2);
}