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


Выподающее Меню

Автор amir19, 27 февр. 2011 14:02

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

#1 amir19

amir19

    Новичок

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

Отправлено 27 Февраль 2011 - 14:02

Скачал с инета код выпадающего меню
код:

    <!--[if gte IE 5.5]>
    <script language="JavaScript" src="nav-h.js" type="text/JavaScript"></script>
    <![endif]-->

    <ul id="navmenu-v">
    <li><a href="index.html">Главная</a></li>
    <li><a href="templates.html">Шаблоны, рецепты +</a>
    <ul>
    <li><a href="templates.html">Шаблоны, заготовки +</a>
    <ul>
    <li><a href="temp1.html">Шаблон 1</a></li>
    <li><a href="temp2.html">Шаблон 2</a></li>
    <li><a href="temp3.html">Шаблон 3</a></li>
    <li><a href="temp4.html">Шаблон 4</a></li>
    <li><a href="temp5.html">Шаблон 5</a></li>
    <li><a href="temp6.html">Шаблон 6</a></li>
    <li><a href="temp7.html">Шаблон 7</a></li>
    <li><a href="temp8.html">Шаблон 8</a></li>
    </ul>
    </li>
    <li><a href="faq.html">Рецепты HTML</a></li>
    <li><a href="faq-css.html">Рецепты CSS</a></li>
    </ul>
    </li>
    <li><a href="#">Менюшки +</a>
    <ul>
    <li><a href="#">Вертикальные +</a>
    <ul>
    <li><a href="menu1.html">Вертикальное меню 1</a></li>
    <li><a href="menu2.html">Вертикальное меню 2</a></li>
    <li><a href="menu3.html">Вертикальное меню 3</a></li>
    <li><a href="menu4.html">Вертикальное меню 4</a></li>
    <li><a href="menu5.html">Вертикальное меню 5</a></li>
    </ul>
    </li>
    <li><a href="#">Горизонтальные +</a>
    <ul>
    <li><a href="menu6.html">Горизонтальное меню 1</a></li>
    <li><a href="menu7.html">Горизонтальное меню 2</a></li>
    <li><a href="menu8.html">Горизонтальное меню 3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="http://www.narod.ru/...67967">Гостевая книга</a></li>
    <li><a href="submit.html">Контакт</a></li>
    </ul>

CSS

    ul#navmenu-v,
    ul#navmenu-v li,
    ul#navmenu-v ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 160px;
    list-style: none;
    }

    ul#navmenu-v:after {
    clear: both;
    display: block;
    font: 1px/0px serif;
    content: ".";
    height: 0;
    visibility: hidden;
    }

    ul#navmenu-v li {
    float: left;
    display: block !important;
    display: inline;
    position: relative;
    }


    ul#navmenu-v a {
    border: 1px solid #FFF;
    border-right-color: #527337;
    border-bottom-color: #527337;
    padding: 0 6px;
    display: block;
    background: #A2C585;
    color: #666;
    font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: auto !important;
    height: 1%;
    }


    ul#navmenu-v a:hover,
    ul#navmenu-v li:hover a,
    ul#navmenu-v li.iehover a {
    background: #648B43;
    color: #FFF;
    }


    ul#navmenu-v li:hover li a,
    ul#navmenu-v li.iehover li a {
    background: #648B43;
    color: #BCD6A7;
    }


    ul#navmenu-v li:hover li a:hover,
    ul#navmenu-v li:hover li:hover a,
    ul#navmenu-v li.iehover li a:hover,
    ul#navmenu-v li.iehover li.iehover a {
    background: #648B43;
    color: #FFF;
    }


    ul#navmenu-v li:hover li:hover li a,
    ul#navmenu-v li.iehover li.iehover li a {
    background: #648B43;
    color: #BCD6A7;
    }


    ul#navmenu-v li:hover li:hover li a:hover,
    ul#navmenu-v li:hover li:hover li:hover a,
    ul#navmenu-v li.iehover li.iehover li a:hover,
    ul#navmenu-v li.iehover li.iehover li.iehover a {
    background: #648B43;
    color: #FFF;
    }


    ul#navmenu-v li:hover li:hover li:hover li a,
    ul#navmenu-v li.iehover li.iehover li.iehover li a {
    background: #648B43;
    color: #BCD6A7;
    }


    ul#navmenu-v li:hover li:hover li:hover li a:hover,
    ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
    background: #648B43;
    color: #FFF;
    }

    ul#navmenu-v ul,
    ul#navmenu-v ul ul,
    ul#navmenu-v ul ul ul {
    display: none;
    position: absolute;
    top: 0;
    left: 160px;
    }


    ul#navmenu-v li:hover ul ul,
    ul#navmenu-v li:hover ul ul ul,
    ul#navmenu-v li.iehover ul ul,
    ul#navmenu-v li.iehover ul ul ul {
    display: none;
    }

    ul#navmenu-v li:hover ul,
    ul#navmenu-v ul li:hover ul,
    ul#navmenu-v ul ul li:hover ul,
    ul#navmenu-v li.iehover ul,
    ul#navmenu-v ul li.iehover ul,
    ul#navmenu-v ul ul li.iehover ul {
    display: block;
    }

не смог загрузить nav-h.js что бы вы посмотрели. И его тоже незнаю куда всавить.
хотел что бы данное меню отображалось вместо меню слева

#2 support

support

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

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 01 Март 2011 - 18:04

Собственно по поводу меню можно написать значительно проще:
<ul class="treemenu">
  <li>Корневой элемент 1
	<ul>
	  <li>Вложенный элемент 1</li>
	  <li>Вложенный  элемент 2</li>
	</ul>
  </li>
  <li>Корневой элемент 2
	<ul>
	  <li>Вложенный элемент 3</li>
	  <li>Вложенный  элемент 4</li>
	</ul>
  </li>
</ul>

Ну и стили для этого меню:
.menu li {position:relative;width:200px;}
.menu li ul {position:absolute;display:none;left:200px;top:0px;}

И скрипт для этой менюхи получится такой:
$('.treemenu > li').hover(
  function () {
	$(this).find("ul").show();
  }, 
  function () {
	$(this).find("ul").hide();
  }
);
</script>

Вставлять этот код соответственно следует в раздел "Сайт" > "Редактор тем":
html код - в шаблон "html", например после кода:
					<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
					<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item"> 
							<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul><br />
				  </li>

Стили вставляем в файл main.csstemplate

Скрипты вставляем либо в html код, тогда просто он вставляется в теге script:
<script type="text/javascript">
  тут
</script>

либо в файле main.js тогда он вставляется например:
$("#deliveryConvenientDate").datepicker({
	dayNames			: ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
	dayNamesMin		  : ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб' ],
	closeText			: 'Готово',
	currentText		  : 'Сегодня' ,
	duration			: '',
	monthNames		  : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Окрябрь','Ноябрь','Декабрь'],
	monthNamesShort : ['Янв','Фев','Март','Апр','Май','Июнь','Июль','Авг','Сен','Окт','Ноя','Дек'],
	yearRange			: "-6:+6",
	dateFormat		  : 'dd.mm.yy',
	minDate		 : new Date(),
	firstDay			: 1
  });

  тут

});

Либо если для этой цели создаётся файл, например nav-h.js, то в шаблоне "html":
  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

  тут

</head>

Мой пример стоит использовать по желанию, естественно для него придётся дописать стили отображения, раскрасить как-то пункты меню. Если этого делать не хочется, то естественно лучше использовать Ваш пример. Вставляем аналогично.
Обратно в Изменение общей стилистики


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

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

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