Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Как реализован сайт  (Прочитано 6675 раз)
0 Пользователей и 1 Гость смотрят эту тему.
XXX
Участник

ru
Offline Offline

« : 05-10-2011 18:40 » 

Доброго всем вечера!

    Интересует вопрос как реализован сайт http://www.римские-каникулы29.рф/  Какие технологии применялись в нем.. Хочется сделать что-то подобное.
    Я так понимаю, что этот сайт был свёрстан блочно, применены технологии jquery-ui и jquery.   
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 06-10-2011 05:17 » 

Сверстан он хреново.

И... там столько много jquеry - штучек , что дажн непонятно зачем.
Попробуй отключить js - скрипты - и *опа! уже ничего нет  ....
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Kivals
Команда клуба

us
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 06-10-2011 08:43 » 

Sla, это презентационый сайт и судя по содержимому - он не предназначен для тех, кто умеет отключать js Улыбаюсь
ИМХО навигация удобная, а ресурсоемкость - кого она волнует ? Ага
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 06-10-2011 09:07 » 

Та какая презентация?
Футер налазит на текст, при таком обилии js это можно было бы и исправить. Наблюдаются ошибки в верстке - благо браузеры добрые - игнорируют.
Юзабилити, м.... пока не дойдешь до конца, а потом БАЦ- что-то по глазам пробежалось.
Меню - совсем не в стиле.
Там еще и СЕО плохо, оччень плохо.

зы Чего я распинаюсь? Улыбаюсь
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #4 : 06-10-2011 16:05 » 

Спасибо  Улыбаюсь

То что проблемы с этим сайтом есть - заметила.. Проблема с Галереей (Отображается по-разному в разных браузерах). Ссылка "Просмотреть прайскурант" как-то странно работает в лисе 7.0.1.

Сами эффекты понравились.  
« Последнее редактирование: 06-10-2011 16:21 от XXX » Записан
XXX
Участник

ru
Offline Offline

« Ответ #5 : 20-10-2011 19:31 » 

Доброго всем время провождения..)
   Хочу реализовать такое же меню как в римские-каникулы29.рф. Чтобы оно выдвигалось при наведении мышки и при клике закрывалось и переходило на выбранную ссылку.
  Делаю как там:
HTML:
Код:
<menu>
<ul>
<li><a href="#aboutus" class="menuabout white myriadpro">История</a></li>
<li><a href="#rimsterms" class="menurimsterms white myriadpro">Римские термы</a></li>
<li><a href="#spa-capsul" class="menuspa-capsul white myriadpro">Sра-капсула</a></li>
<li><a href="#masage" class="menumasage white myriadpro">Массаж</a></li>
<li><a href="#obertivanie" class="menuobertivanie white myriadpro">Обертывание</a></li>
<li><a href="#vizage" class="menuvizage white myriadpro">Визаж</a></li>
<li><a href="#manikure" class="menumanikure white myriadpro">Маникюр</a></li>
<li><a href="#pedikure" class="menupedikure white myriadpro">Педикюр</a></li>
<li><a href="#solarij" class="menusolarij white myriadpro">Солярий</a></li>
<li><a href="#usgellery" class="menuusgellery white myriadpro">Галерея</a></li>
<li><a href="#contactus" class="menucontactus white myriadpro">Контакты</a></li>
</ul>
<img src="images/hrwhite.gif" class="hrwhite">
<div class="menu_info">
<img src="images/logosmall.png" class="logo">
<p class="menu_text">SPA-Салон “Римские Каникулы”<br />Тел.: 8 (8182) 44-00-90<br />Romanholidays@mail.ru</p>
</div>
<div class="tab">
<a href="#" class="opentab">
<table>

<tr>
<td><span></span></td>
</td>
</table>
</a>
</div>
</menu>

CSS:

Код:

/* menu */
menu {display:none; position:fixed; width:675px; height:100%; background:#eec254; z-index:1000; left:-655px; margin-top:0px}
menu ul {float:left; width:530px; margin-top:30px; margin-left:40px !important; }
menu ul li {clear:left !important; width:675px !important; margin-left:0px !important; line-height:34px;}
menu ul li a {font-size:36px; color:#fff; font-weight:bold;}
menu ul li a:hover {background-color:#fff;color:#000;}
menu ul li a.black {color:#000 !important}
menu img.hrwhite {float:left; margin-left:40px; margin-top:15px;}
menu a.login {float:left; width:500px; margin-left:40px; font-size:44px; color:#fff}
menu .menu_info {float:left;clear:both; width:675px;}
menu .menu_text {margin-top:29px;color:#fff;font-family:Tahoma, Geneva, sans-serif;font-size:11px;}
menu img.logo {float:left; margin-left:40px; margin-top:16px; margin-right:13px;}
menu div.tab {position:absolute; right:0px; width:60px; height:100%; background-color:#eec254;}
menu div.tab a {display:block; float:left; width:60px; height:100%; background:#eec254;}
menu div.tab a table {height:100%}
menu div.tab a table tr td {height:100%; vertical-align:middle}
menu div.tab a table tr td span {float:left; width:18px; height:75px; margin-left:20px; background: url(../images/menuright.gif) no-repeat top left}
menu div.tab a table tr td span.right {background:url(../images/menuright.gif) no-repeat bottom left;}
menu div.tab a table tr td span.left {background:url(../images/menuleft.gif) no-repeat bottom left;}


javascript

Код:
// menu expand
$('menu').hover(function() {
 $(this).parents().find('menu').delay(300).stop(true, true).animate({'left' : "-40px" }, 500);
 $(this).find('span').addClass('left');
}, function() {
 $(this).parents().find('menu').stop(true, true).animate({'left' : "-655px" });
  $(this).find('span').addClass('right');
  $(this).find('span').removeClass('left');
});

// close left menu on click
$('menu ul li a').click(function () {
$(this).parents().find('menu').stop(true, true).animate({'left' : "-655px" });
})
// menu scroll
$('menu ul li a, a[class$=next], ul.submenu li a').click(function () {
var target = $(this).attr('href');
$.scrollTo(target, 1000);

$('ul.submenu li a').removeClass('active').filter('a[href='+target+']').addClass('active');

if ($('menu span').is('.left'))
$('a.opentab').click(); // Close the open menu.

var currentx = $(window).scrollLeft();
var target = $(target).offset().left;

if (currentx > target) {
var change = '+=100px';
} else if (currentx == target) {
var change = '=0px';
}
else
var change = '-=100px';

$('ul.main').animate({'backgroundPosition': change }, 1000);

return false;
});

Так не работает.. (

Помогите разобраться.
« Последнее редактирование: 21-10-2011 14:22 от XXX » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 20-10-2011 20:21 » 

XXX, а ты с jquery на ВЫ?
просто нужно понимать что ты хочешь сказать...
Давай по порядку
Код: (jQuery)
                $('menu').hover(function() {
                  $(this).parents().find('menu').delay(300).stop(true, true).animate({'left' : "-40px" }, 500);
                  $(this).find('span').addClass('left');
                }, function() {
                  $(this).parents().find('menu').stop(true, true).animate({'left' : "-655px" });
                   $(this).find('span').addClass('right');
                   $(this).find('span').removeClass('left');
                });

Вот расскажи что ты хочешь здесь увидеть...
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #7 : 21-10-2011 19:08 » 

Да, с jquery на Вы..

Привязываю функцию к $('menu'), она будет вызвана при hover на элементе menu.
Сначала будет выполнен метод поиск родительского элемента 'menu', затем будет выполнена задержка delay(300) на 300 мс. Далее будет выполнено animate {'left' : "-40px" } - что это за параметр не очень понятно, блок выезжает со скоростью 500мс.  
$(this).find('span').addClass('left'); - будет найден 'span'  и добавлен класс left, в котором содержится картинка.
Далее все возвращается обратно.

CSS:
menu {display:none; position:fixed; width:675px; height:100%; background:#eec254; z-index:1000; left:-655px; margin-top:0px}
  Что это за свойства: z-index:1000; left:-655px; ?
  Что за блок такой <menu></menu>, это корректный блок?

Понимаю, что вопросы из разряда очень простые, но я чего-то недопонимаю.. ( 

 
« Последнее редактирование: 21-10-2011 20:18 от XXX » Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 21-10-2011 20:31 » 

тут как бы вопрос, в основном, относился к parents(). Зачем...

animate {'left' : "-40px" }
 это как раз мелочь... выполнить анимацию от существующего left до -40
и... когда применяются описанные тобой функции?
 есть onload,  а есть $(document).ready 

Добавлено через 2 минуты и 18 секунд:
>Что за блок такой <menu></menu>, это корректный блок?

корректный в html5
« Последнее редактирование: 21-10-2011 20:33 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #9 : 21-10-2011 20:39 » 

Функции применяются $(document).ready
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #10 : 21-10-2011 20:43 » 

XXX, ну...нужно смотреть пациента...

хы... я доступен в скайпе и в аське
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
XXX
Участник

ru
Offline Offline

« Ответ #11 : 22-10-2011 11:42 » new

Заработало..) У меня menu это class, а не HTML5.. ) 
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines