Facebook sitesinin beş altı sene önceki halini hatırlayanlar varmıdır bilmiyorum. O zamanlarda şimdiki Facebook’ta sol tarafta bulunan kategoriler sayfanın en altında sabit duran bir menü şeklindeydi. Çok kullanışlı ve sitede tıklamak istediklerimiz gözümüzün önünde olurdu hep. Bir özelliğide favori uygulamalarınızı ve sayfalarınızı sürükle bırak yöntemiyle bu sabit duran menüye atabiliyorduk. Mesela Texas holdem poker linkini basılı tutup sabit menüye sürüklediğimizde sabit menü içinde yer tutup ikon şeklini alırdı.
Bu menü örneğini ilk Facebook sitesinde görmüştüm ve o zamanlar baya bi tutulmuştu bu tarz menü örnekleri. Hatta sitenizin alt kısmında sabit duran menüler kullanmak için bazı internet servisleri bile oluşturulmuştu o zamanlarda. Sırf Facebook’a benzemek için birçok websiteside kullanmıştı bu servisi. Sanırım hala var. Yanlış hatırlamıyorsam geçenlerde görmüş gibiydim.
O zamanlarda şimdiki Codrops gibi popüler tasarımlar hazırlayan ve birçok sitede tasarımları yayınlanan Soh Tanaka tarafından Facebook tarzı böyle bir örnek hazırlandı. Şuan internet üzerinden bu örneği yayınlayan birçok websitesi bulabilirsiniz ama hepsi yönlendirme linki olarak Sohtanaka.com’u gösteriyor. Sohtanaka.com sitesi bildiğim kadarıyla biri tarafından çalınmıştı. Hala kullanılmamasına rağmen Alexa sıralaması 57 bin gibi bir rakamda duruyor.
Kullanım
- Body etiketleri arasına eklemeniz gereken bölümler.
Css :
<style type="text/css">
body {
background: #7f7f7f url(background.gif) no-repeat center top;
margin: 0;
padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
font-size: 1.2em;
padding: 5px 10px;
color: #ccc;
width: 940px;
margin: 0 auto;
}
h1 a { color: #fff; }
h1 span {font-weight: normal;}
#footpanel {
position: fixed;
bottom: 0; left: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 94%;
margin: 0 3%;
}
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
position: absolute;
top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
font-size: 1.1em;
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
}
#footpanel ul li a{
padding: 5px;
float: left;
text-indent: -9999px;
height: 16px; width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
html #footpanel ul li a:hover{ background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when subpanel is open--*/
background-color: #fff;
height: 17px;
margin-top: -2px; /*--Push it up 2px to attach the active button to subpanel--*/
border: 1px solid #555;
border-top: none;
z-index: 200; /*--Keeps the active area on top of the subpanel--*/
position: relative;
}
#footpanel a.home{
background: url(fbfooterpanel_files/home.png) no-repeat 15px center;
width: 50px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent--*/
}
a.profile{ background: url(fbfooterpanel_files/user.png) no-repeat center center; }
a.contacts{ background: url(fbfooterpanel_files/address-book.png) no-repeat center center; }
a.playlist{ background: url(fbfooterpanel_files/document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(fbfooterpanel_files/film.png) no-repeat center center; }
a.messages{ background: url(fbfooterpanel_files/mail.png) no-repeat center center; }
a.editprofile{ background: url(fbfooterpanel_files/wrench_screwdriver.png) no-repeat center center; }
#footpanel a.chat{
background: url(fbfooterpanel_files/balloon.png) no-repeat 15px center;
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent--*/
}
a.alerts{ background: url(fbfooterpanel_files/newspaper.png) no-repeat center center; }
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; } /*--Right align the chat and alert panels--*/
#footpanel a small { /*--panel tool tip styles--*/
text-align: center;
width: 70px;
background: url(pop_arrow.gif) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*--Hide by default--*/
color: #fff;
font-size: 1em;
text-indent: 0;
}
#footpanel a:hover small{
display: block; /*--Show on hover--*/
position: absolute;
top: -35px; /*--Position tooltip 35px above the list item--*/
left: 50%;
margin-left: -40px; /*--Center the tooltip--*/
z-index: 9999;
}
#footpanel ul li div a { /*--Reset link style for subpanel links--*/
text-indent: 0;
width: auto;
height: auto;
padding: 0;
float: none;
color: #00629a;
position: static;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset link style for subpanel links--*/
#footpanel .subpanel {
position: absolute;
left: 0; bottom: 27px;
display: none; /*--Hide by default--*/
width: 198px;
border: 1px solid #555;
background: #fff;
overflow: hidden;
padding-bottom: 2px;
}
#footpanel h3 {
background: #526ea6;
padding: 5px 10px;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#footpanel h3 span {
font-size: 1.5em;
float: right;
line-height: 0.6em;
font-weight: normal;
}
#footpanel .subpanel ul{
padding: 0; margin: 0;
background: #fff;
width: 100%;
overflow: auto;
}
#footpanel .subpanel li{
float: none; /*--Reset float--*/
display: block;
padding: 0; margin: 0;
overflow: hidden;
clear: both;
background: #fff;
position: static; /*--Reset relative positioning--*/
font-size: 0.9em;
}
#chatpanel .subpanel li { background: url(fbfooterpanel_files/dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
padding: 5px;
background: #fff;
color: #777;
float: left;
}
#chatpanel .subpanel li a img {
float: left;
margin: 0 5px;
}
#chatpanel .subpanel li a{
padding: 3px 0; margin: 0;
line-height: 22px;
height: 22px;
background: #fff;
display: block;
}
#chatpanel .subpanel li a:hover {
background: #3b5998;
color: #fff;
text-decoration: none;
}
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
border-top: 1px solid #f0f0f0;
display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
background: url(delete_x.gif) no-repeat;
float: right;
width: 13px; height: 14px;
margin: 5px;
text-indent: -9999px;
visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
text-align: right;
padding: 5px 10px 5px 0;
}
</style>
jQuery adresi :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JavaScript :
<script type="text/javascript">
$(document).ready(function(){
//Adjust panel height
$.fn.adjustPanel = function(){
$(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height
var windowHeight = $(window).height(); //Get the height of the browser viewport
var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel
var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)
var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)
if ( panelsub >= panelAdjust ) { //If subpanel is taller than max height...
$(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height
$(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size
}
else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...
$(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)
}
};
//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel
//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
$("#chatpanel").adjustPanel();
$("#alertpanel").adjustPanel();
});
//Click event on Chat Panel + Alert Panel
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
$(this).next(".subpanel").hide(); //Hide active subpanel
$("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
}
else { //if subpanel is not active...
$(".subpanel").hide(); //Hide all subpanels
$(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
$(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
}
return false; //Prevent browser jump to link anchor
});
//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
$(".subpanel").hide(); //hide subpanel
$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
e.stopPropagation(); //Prevents the subpanel ul from closing on click
});
//Delete icons on Alert Panel
$("#alertpanel li").hover(function() {
$(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
$(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});
});
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="footpanel"> <ul id="mainpanel"> <li><a href="https://www.mintik.com/?p=13958" class="spr home">Home <small>Mintik.com</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr profile">View Profile <small>View Profile</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr editprofile">Edit Profile <small>Edit Profile</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr contacts">Contacts <small>Contacts</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr messages">Messages (10) <small>Messages</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr playlist">Play List <small>Play List</small></a></li> <li><a href="https://www.mintik.com/?p=13958" class="spr videos">Videos <small>Videos</small></a></li> <li id="alertpanel"> <a href="#" class="alerts">Alerts</a> <div style="height: auto; display: none;" class="subpanel"> <h3><span> – </span>Notifications</h3> <ul style="height: auto;"> <li class="view"><a class="" href="#">View All</a></li> <li><a style="visibility: hidden;" href="#" class="delete">X</a><p><a class="" href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a class="" href="#">lobortis facilisis</a>.</p></li> <li><a style="visibility: hidden;" href="#" class="delete">X</a><p><a class="" href="#">Et voco </a> Duis vel quis at metuo obruo, turpis quadrum nostrud <a class="" href="#">lobortis facilisis</a>.</p></li> <li><a style="visibility: hidden;" href="#" class="delete">X</a><p><a class="" href="#">Tego</a> nulla eum probo metuo nullus indoles os consequat commoveo os<a class="" href="#">lobortis facilisis</a>.</p></li> <li><a href="#" class="delete">X</a><p><a class="" href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a class="" href="#">lobortis facilisis</a>.</p></li> <li><a style="visibility: hidden;" href="#" class="delete">X</a><p><a class="" href="#">Nonummy</a> nulla eum probo metuo nullus indoles os consequat commoveo <a class="" href="#">lobortis facilisis</a>.</p></li> <li><a href="#" class="delete">X</a><p><a class="" href="#">Tego</a> minim autem aptent et jumentum metuo uxor nibh euismod si <a class="" href="#">lobortis facilisis</a>.</p></li> <li><a style="visibility: hidden;" href="#" class="delete">X</a><p><a class="" href="#">Antehabeo</a> abico quod duis odio tation luctus eu ad <a class="" href="#">lobortis facilisis</a>.</p></li> </ul> </div> </li> <li id="chatpanel"> <a href="#" class="chat">Friends (<strong>18</strong>) </a> <div style="height: 794px; display: none;" class="subpanel"> <h3><span> – </span>Friends Online</h3> <ul style="height: 769px;"> <li><span>Family Members</span></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><span>Other Friends</span></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> <li><a class="" href="#"><img src="fbfooterpanel_files/chat-thumb.gif" alt=""> Your Friend</a></li> </ul> </div> </li> </ul> </div>