hibycocuk

hibycocuk

jQuerytooltipsmenu

JQuery tooltips menu

Yazar: Emre Çördükler | Yayın Tarihi: 04 Şubat 2011 | Yorum Kategori: Css Htm jQuery Menü


üst ve altı tasarım
<script type="text/javascript" src="http://hibycocuk.funpic.org/calismalar/menuhs1/jquery.js"></script>
<script type="text/javascript" src="http://hibycocuk.funpic.org/calismalar/menuhs1/jquery.easing.1.3.js"></script>
<script type="text/javascript">

$(document).ready(function () {

//transitions
//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
var style = 'easeOutExpo';
var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
var default_top = $('#menu li.selected').height();

//Set the default position and text for the tooltips
$('#box').css({left: default_left, top: default_top});
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));

//if mouseover the menu item
$('#menu li').hover(function () {

left = Math.round($(this).offset().left - $('#menu').offset().left);

//Set it to current item position and text
$('#box .head').html($(this).find('img').attr('alt'));
$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});


//if user click on the menu
}).click(function () {

//reset the selected item
$('#menu li').removeClass('selected');

//select the current item
$(this).addClass('selected');

});

//If the mouse leave the menu, reset the floating bar to the selected item
$('#menu').mouseleave(function () {

default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

//Set it back to default position and text
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});

});

});



</script>

<style type="text/css">

body {
font-family:georgia;
font-size:14px;
}

a {
text-decoration:none;
color:#333;
outline:0;
}

img {
outline:0;
border:0;
}

#menu {
/* you must set it to relative, so that you can use absolute position for children elements */
position:relative;
text-align:center;
width:583px;
height:40px;
}

#menu ul {
/* remove the list style and spaces*/
margin:0;
padding:0;
list-style:none;
display:inline;

/* position absolute so that z-index can be defined */
position:absolute;

/* center the menu, depend on the width of you menu*/
left:110px;
top:0;

}

#menu ul li {

/* give some spaces between the list items */
margin:0 5px;

/* display the list item in single row */
float:left;
}

#menu #box {

/* position absolute so that z-index can be defined and able to move this item using javascript */
position:absolute;
left:0;
top:0;
z-index:200;

/* image of the right rounded corner */
background:url(images/tail.gif) no-repeat right center;
height:35px;


/* add padding 8px so that the tail would appear */
padding-right:8px;

/* set the box position manually */
margin-left:5px;

}

#menu #box .head {
/* image of the left rounded corner */
background:url(images/head.gif) no-repeat 0 0;
height:35px;
color:#eee;

/* force text display in one line */
white-space:nowrap;

/* set the text position manually */
padding-left:8px;
padding-top:12px;
}
</style>


</head>
<body>

Htm
<div id="menu">

<ul>
<li><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/user.png" width="32" height="32" alt="My Profile" title=""/></a></li>
<li><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/photo.png" width="32" height="32" alt="Photo Gallery" title=""/></a></li>
<li><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""/></a></li>
<li><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/rss.png" width="32" height="32" alt="RSS" title=""/></a></li>

<li><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/search.png" width="32" height="32" alt="Search" title=""/></a></li>
<li class="selected"><a href="#"><img src="https://img.webme.com/pic/h/hibycocuk/setting.png" width="32" height="32" alt="Control Panel" title=""/></a></li>
</ul>

<!-- If you want to make it even simpler, you can append these html using jquery -->
<div id="box"><div class="head"></div></div>

</div>

  Önizlemesi (jQuery tooltips menu )

  jQuery tooltips menu  Şifre: hibycocuk.tr.gg

Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.

Yorum ve Görüşlerinizi eksik etmeyiniz (:

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol