Навигация cайта

ahatomik · 2014-11-15 21:39:00

Парни , помоги пожалуйста.
Вот есть шаблон - http://i31.fastpic.ru/big/2011/1109/2d/ … 9f6e2d.jpg
У него есть такая простая навигация в шапке:

В моей случае 4 мало категорий (ссылок). Мне нужно минимум 6 категорий - они у меня основные на сайте.
Как сделать - вот типа такого варианта:

Прошу подсказать - как сделать!? Если есть еще вариант - то покажите (ссылку). Я все "перелопатил" но нужной не нашёл

Изменено ahatomik (2014-11-15 21:40:17)

pixar2301 · 2014-11-16 00:37:47

ahatomik, единственное не знаю правильно это или нет, но я бы сделал так:)

1. Дорисовываешь недостающие пунктиры либо квадратные блоки как на твоем примере см. рис.1

2. Заходишь в файл main и находишь строчки:

Потом добавляешь свои классы т.е. примерно должно получится следующее:

</div>

Новые классы для удобства я назвал - dle2 и dle3

После заходишь в файл со стилями style и добавляешь параметры к новым классам т.е.

.dle2 {
background: url('../images/dle.png') no-repeat scroll 0% 0% transparent;
width: 70px;
height: 22px;
position: absolute;
margin: 205px 0px 0px 205px;
}

.dle3 {
background: url('../images/dle.png') no-repeat scroll 0% 0% transparent;
width: 70px;
height: 22px;
position: absolute;
margin: 205px 0px 0px 695px;
}

Они сделаны по стандарту уже существующих классов поэтому картинки нужно поменять на свои либо вообще убрать если тебе только текст нужен.

Вот и все должно получиться примерно так:

Если фото не нужно то опять же style у классов удаляешь
background: url('../images/dle.png') no-repeat scroll 0% 0% transparent; которая за картинку отвечает.

Должно получиться следующее:

.dle {width:70px;height:22px;position:absolute;margin:25px 0px 0px 210px;}
.dle:hover {width:70px;height:22px;}
.joomla {width:45px;height:9px;position:absolute;margin:145px 0px 0px 230px;}
.joomla:hover {width:45px;height:9px;}
.ucoz {width:75px;height:20px;position:absolute;margin:0px 0px 0px 695px;}
.ucoz:hover {width:75px;height:20px;}

.other {width:41px;height:10px;position:absolute;margin:122px 0px 0px 695px;}
.other:hover {width:41px;height:10px;}

.dle2 {

width: 70px;
height: 22px;
position: absolute;
margin: 205px 0px 0px 205px;
}

.dle3 {

width: 70px;
height: 22px;
position: absolute;
margin: 205px 0px 0px 695px;
}

в main тоже кое что измениться, а именно

<div class="mouse">
<a href="r">Категория1</a>
<a href="r">Категория2</a>
<a href="r">Категория3</a>
<a href="r">Категория4</a>
<a href="r">Категория5</a>
<a href="r">Категория6</a>
</div>

Получится :

Вообщем как то так)

PS параметрами margin:0px 0px 0px 0px; регулируешь положение текста относительно нарисованных пунктиров.

Изменено pixar2301 (2014-11-16 00:38:53)

ahatomik · 2014-11-16 14:47:08

pixar2301, Ух ты ! Спасибо большое !
Сейчас буду пробовать
И спасибо , что так все расписал - прям полный FAQ

Next Generation CMS :: Форум поддержки

Объявление

#1 2014-11-15 21:39:00

Навигация cайта

#2 2014-11-16 00:37:47

Re: Навигация cайта

#3 2014-11-16 14:47:08

Re: Навигация cайта

Подвал раздела