смена телефона при выборе пункта
HTML
<div class="top_menu_list">
<ul>
<li><span class="top_menu_list_city">Выбрать филиал:</span>
<ul>
<li data-phone-number="123">Пермь</li>
<li data-phone-number="234">Березники</li>
<li data-phone-number="345">Екатеринбург</li>
<li data-phone-number="456">Челябинск</li>
<li data-phone-number="567">Ижевск</li>
</ul>
</li>
</ul>
<div class="top_menu_list_phone">Номер телефона</div>
</div>
CSS
body {background: #444;}
.top_menu_list {
margin: 15px 30px 15px 0;
color: #FFF;
}
.top_menu_list ul {list-style: none;}
.top_menu_list > ul {float: left;}
.top_menu_list ul ul {
position:absolute;
width: 145px;
display:none;
left:-11px;
background: #FF8E10;
}
.top_menu_list li {
position:relative;
display:block;
margin:0;
z-index:999;
}
.top_menu_list li a {
display:block;
padding:5px 10px;
text-decoration:none;
text-align:left;
color:#fff;
font-weight:bold;
}
.top_menu_list_phone {
float: left;
margin: 15px 30px;
}
.top_menu_list li li:hover{
cursor: pointer;
}
JavaScript
function get_cookie(cookie_name){
var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
if (results)
return (unescape(results[2]));
else
return null;
}
function set_values(){
var phoneCookie = get_cookie('phone'),
cityCookie = get_cookie('city');
if (phoneCookie && cityCookie) {
$('.top_menu_list_phone').text(phoneCookie);
$('.top_menu_list_city').text(cityCookie);
}
}
set_values();
$('.top_menu_list li').hover(
function() {
$('ul', this).slideDown(110);
},
function() {
$('ul', this).slideUp(110);
}
);
$('.top_menu_list li ul li').click(function(){
var phoneNumber = $(this).data('phone-number'),
date = new Date(),
cityName = $(this).text();
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
document.cookie = "phone="+phoneNumber+"; expires="+date.toGMTString()+"; path=/";
document.cookie = "city="+cityName+"; expires="+date.toGMTString()+"; path=/";
$('.top_menu_list_phone').fadeOut(200, function(){
$(this).text(phoneNumber).fadeIn(200);
});
$('.top_menu_list_city').fadeOut(200, function(){
$(this).text(cityName).fadeIn(200);
});
});