Saturday, February 24, 2018

Skptricks CSS html html5 web development Facebook Like Chat Slider Layout Design Example

Facebook Like Chat Slider Layout Design Example

by on February 24, 2018 in , , ,
Today, we are going to discuss how to design Facebook style chat slider layout. Slider layout design is very easy and simple only we need to include html code and CSS style sheet.

facebook like chat slider layout,how to design Facebook style chat slider layout,source code for Facebook like chat slider design ,Facebook Style Right Chat Slider,facebook right chat sidebar friends,facebook right chat bar,facebook chat bottom right corner,facebook chat list right side,facebook chat down right now,how to get facebook chat on right side,facebook chat on the right side,facebook chat on the right

Here is we have used position property of CSS to set the slider at fixed position. Basically The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).


 Steps for Slider Layout design :
1. Setting the outer element of div "chat-sidebar" with below CSS properties, that help to set the slider layout at fixed position  :
position: fixed;
right: 0px;
top: 0px;

2. Displaying the user details in list order inside the outer element of div "chat-sidebar".

Facebook Style Right Chat Slider

Lets see the complete source code for Facebook like chat slider design :


chat slider Layout.html
This consists of html code for slider layout.
<html> 
<head> 
 <link rel="stylesheet" href="style.css">
</head> 
<body> 

<div id="chat-sidebar">

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Sumit Kumar Pradhan </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Skptricks </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Amit Singh </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Neeraj Tiwari </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Sorav Singh </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Lokesh Singh </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Tony </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Alex Robby </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Pragaya Mishra </span>
 </div> 

 <div id="sidebar-user-box">
 <img src="user.png" />
 <span id="slider-username">Abhishek Mishra </span>
 </div> 
 
</div> 
</body>
</html>

style.css
This consists of style-sheet design for slider layout.
#chat-sidebar {
     width: 250px;
     position: fixed;
     height: 100%;
     right: 0px;
     top: 0px;
     padding-top: 10px;
     padding-bottom: 10px;
     border: 1px solid #b2b2b2;
}
 #sidebar-user-box {
     padding: 4px;     
     margin-bottom: 4px;
     font-size: 15px;
     font-family: Calibri;
  font-weight:bold;
  cursor:pointer;
}
#sidebar-user-box:hover {
     background-color:#e5e5e5 ;
}
 #sidebar-user-box:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 img{
     width:35px;
     height:35px;
     border-radius:50%;
     float:left;
}
 #slider-username{
     float:left;
     line-height:30px;
     margin-left:5px;
}

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20Like%20Chat%20Slider%20Layout%20Design%20Example

Demo Link :
https://skptricks.github.io/learncoding/facebook%20like%20chat%20slider%20layout/chat%20slider%20Layout.html

This is all about the Facebook chat list on right using HTML and CSS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. 

By at
Tags: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)