Перейти к содержимому


Как У Себя На Сайте Это Реализовать!?

Автор demitrus, 21 янв. 2014 14:55

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 9

#1 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 21 Январь 2014 - 14:55

Нашел очень красивое меню вот ОНО для меня это был бы идеальный вариант но как я только не пробовал не могу поставить его на сайт помогите пожалуйста буду очень признателен))

Прикрепленные изображения

  • Безымянный.png

#2 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 21 Январь 2014 - 18:56

Просмотр сообщенияdemitrus (21 Январь 2014 - 14:55) писал:

Нашел очень красивое меню вот ОНО для меня это был бы идеальный вариант но как я только не пробовал не могу поставить его на сайт помогите пожалуйста буду очень признателен))
Здравствуйте, приложите пожалуйста исходный код данного меню и мы постараемся вам помочь.

#3 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 22 Январь 2014 - 14:19

здесь в файле который мне предложили для скачивания был один стиль и три скрипта

style.css

ul, li {
margin: 0; padding: 0;
}

#blob {

border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;

}

#nav {
position: relative;
background: #292929;
float: left;
}

#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}

#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
}

_______________________________________________________________________________________________________________

index.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>untitled</title>
<link rel="stylesheet" href="./res/style.css" type="text/css" media="screen">
</head>
<body>



<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">More About My Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li id="blob" style="height: 116px; top: -10px; background-color: rgb(11, 43, 97); width: 171px; left: 0px; overflow-x: hidden; overflow-y: hidden; "></li></ul>


<script src="./res/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./res/jquery-ui.min.js"></script>
<script type="text/javascript" src="./res/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body></html>







.

Прикрепленные файлы

  • Прикрепленный файл  style.css   831байт   362 Количество загрузок:
  • Прикрепленный файл  index.htm   908байт   86 Количество загрузок:

#4 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 22 Январь 2014 - 22:54

для начала надо попробовать его установить, и будет ли оно работать на сайте. Для начала сделайте так:
1.Создайте бэкап шаблона.
2.Данный код добавьте в конец шаблона main.css :
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
position: relative;
background: #292929;
float: left;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
}

Данный код вставьте в шаблон html сразу перед </head>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>untitled</title>
<link rel="stylesheet" href="./res/style.css" type="text/css" media="screen">

данный код вставьте сразу после <body>

<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">More About My Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li id="blob" style="height: 116px; top: -10px; background-color: rgb(11, 43, 97); width: 171px; left: 0px; overflow-x: hidden; overflow-y: hidden; "></li></ul>

После проделанных изменений создайте бэкап шаблона снова!
Данная инструкция это просто проверка работоспособности данного кода.

#5 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 23 Январь 2014 - 19:56

получилось только меню встало вверху а мне нужно на месте  основного

скриншот того что получилось http://screeny.ru/52...89eb19808014225

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Январь 2014 - 04:33

Чтобы изменить существующее меню необходимо заменить в шаблоне HTML
<div class="menuheader">
		  <ul>
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		  </ul>
		</div>
на:

<div class="">
		  <ul id="nav">
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li {% IF menu.header.links.SELECTED %}id="selected"{%ENDIF%}><a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
   <li id="blob" style="height: 116px; top: -10px; background-color: rgb(11, 43, 97); width: 171px; left: 0px; overflow-x: hidden; overflow-y: hidden; "></li>
		  </ul>
		</div>
в дальнейшем возможно потребуется изменить стили

#7 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 24 Январь 2014 - 19:49

сделал все по порядку получилось вот что

http://screeny.ru/52...02da098740036ba

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Январь 2014 - 04:44

как понимаю, изменения вы убрали?
Старый код необходимо убрать, который в самом начале сайта отображает меню, а измененный по стилям необходимо переделать.
Сделайте изменений, сохраните их и укажите пожалуйста номер аккаунта или адрес сайта, чтобы мы могли просмотреть изменения и проконсультировать далее.

#9 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 25 Январь 2014 - 09:16

Аккаунт SL-257475

#10 demitrus

demitrus

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 26 Январь 2014 - 08:58

сделал
Обратно в Шаблон Пластик


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. Privacy Policy