смена телефона при выборе пункта

by Alexander Startsev

HTML

<div class="top_menu_list">
    <ul>
        <li>Выбрать филиал:
            <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_phone(){
	var phoneCookie = get_cookie('phone');
	if (phoneCookie) {
        $('.top_menu_list_phone').text(phoneCookie);
    }
}

set_phone();

$('.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');
		document.cookie = "phone="+phoneNumber+"; expires=01/01/2100 00:00:00";
        $('.top_menu_list_phone').fadeOut(200, function(){
            $(this).text(phoneNumber).fadeIn(200);
        });
        $('.top_menu_list li ul').slideUp(100);
	});