Техническая поддержка сервиса Quadro.Boards

Lazary

Давно, очень давно существуют скрипты осуществляющие замену ссылок основного меню форума на картинки. Лично мне, реализация средствами js, данного момента никогда не нравилась. Поэтому:

Идея: Великий Дука
Реализация: Скромный я
Назначение: Замена ссылок картинками
Язык: CSS
Работоспособность: IE 6*, 7*, 8 ; Opera 9, 10 ; FF3 ; Safary 3,4 ; Chrome 2,3
Установка: html-верх, css-таблицы собственного стиля.
Преимущества: Нет нагрузки на конечного пользователя, Мгновенное срабатывание, возможность ховера, гибкая настройка

<style type="text/css">

/*1. Настройка общего вида линков */

#pun-navlinks a {
display: inline-block;
height: 20px;
width: 70px;
margin-left: 10px;
}

/*2. Настройка изображений */

#navindex a {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a {background: url(адрес_изображения) no-repeat top center;}
#navsearch a {background: url(адрес_изображения) no-repeat top center;}
#navprofile a {background: url(адрес_изображения) no-repeat top center;}
#navpm a {background: url(адрес_изображения) no-repeat top center;}
#navadmin a {background: url(адрес_изображения) no-repeat top center;}
#navlogout a {background: url(адрес_изображения) no-repeat top center;}
#navlogin a {background: url(адрес_изображения) no-repeat top center;}
#navregister a {background: url(адрес_изображения) no-repeat top center;}

/*3. Настройка изображений при ховере (наведении) */

#navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
#navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
#navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
#navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
#navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navregister a:hover {background: url(адрес_изображения) no-repeat top center;}

/* Скрываем текстовые надписи */

#pun-navlinks a span {display: none;}
</style>

Инструкции

1. Настройка общего вида #pun-navlinks a

height: 20px; - укажите высоту ваших изображений

width: 70px; - укажите ширину ваших изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для ховеров ширину указывать не нужно. Свойство наследуется.

margin-left: 10px; - расстояние между линками.

2. Настройка изображений

#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navrules a - Правила
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.
#navawards - Награды (Только для форумов Rusff)

background: url(адрес_изображения) - адрес вашего изображения, которое будет отображаться когда ссылка находится в состоянии покоя.

3. Настройка изображений ховера

Все как и выше. Только изображения для ссылок при наведении.

+5

GsomZoom

Lazary написал(а):

#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister a - Регистрация

А свои линки как-то добавить можно? или пусть они так "выделяются" из общей массы? )

0

Lazary

GsomZoom написал(а):

А свои линки как-то добавить можно? или пусть они так "выделяются" из общей массы? )

#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.

0

GsomZoom

Lazary
Понял, спасибо!

0

Lady cat

А есть ли возможность поставить разные картинки на тот случай, когда есть\нет новых сообщений?

0

Lazary

Lady cat

Нет, к сожалению такой возможности нет.
Уведомление о количестве новых сообщений "(1)" выводится в том же элементе, что содержит текст линка (<span></span>).
Так как стиль скрывает элемент целиком, вывод этой информации не возможен.

0

Lady cat

Решено, извините.

Отредактировано Lady cat (14.05.2011 15:04:05)

0

slastnicova · [1993-10-20]

а как если не секрет мне сделать ссылку на правила также картинкой?
пробовала прописывать так:

#navmisc a {background: url(картинка) no-repeat top center;
display: inline-block;
height: 43px;
width: 115px;}

не срабатывает у меня
и прописывала как Вы говорили для своих ссылок с поядковым номером, тоже не идёт.

0

sadhaka

slastnicova
ссылку на форум дайте

0

slastnicova · [1993-10-20]

sadhaka
стоит в профиле, но вот еще goldgrube.ru

0

Deff

slastnicova

#navrules a {
background: url("http://s2.uploads.ru/I1hOJ.png") 50% 0% no-repeat transparent;
display: inline-block;
height: 38px;
width: 83px;
}

+1

slastnicova · [1993-10-20]

Deff
спасибо, работает)

0

slastnicova · [1993-10-20]

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

код

/*Замена ссылок на картинки*/
#navindex a {
background: url("http://s2.uploads.ru/I1hOJ.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 38px;
width: 83px;
top: -210px;
left: 5px;
}
#navuserlist a {
background: url("http://s3.uploads.ru/zASfY.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 33px;
width: 143px;
top: -210px;
left: 105px;
}

#navsearch a {
background: url("http://s3.uploads.ru/oQdH3.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 37px;
width: 80px;
top: -205px;
left: 190px;
}

#navprofile a {
background: url("http://s3.uploads.ru/pw6Yj.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 41px;
width: 116px;
top: -205px;
left: 235px;
}

#navpm a {
background: url("http://s2.uploads.ru/RiZhO.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 32px;
width: 136px;
top: -200px;
left: 250px;
}

#navadmin a {
background: url("http://s3.uploads.ru/VNUni.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 35px;
width: 250px;
top: -200px;
left: 390px;;
}

#navlogout a {
background: url("http://s2.uploads.ru/5skAO.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 40px;
width: 74px;
top: -195px;
left: 545px;
}

#navlogin a {
background: url("http://s3.uploads.ru/nNu2c.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 35px;
width: 81px;
top: -195px;
left: 625px;
}

#navregister a {
background: url("http://s3.uploads.ru/CV639.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 41px;
width: 160px;
top: -190px;
left: 710px;
}
#navrules a {
background: url("http://s3.uploads.ru/SJEOV.png") no-repeat top center;
display: inline-block;
position: absolute;
z-index: 1000;
height: 43px;
width: 115px;
top: -190px;
left: 875px;
}

но у меня тогда вообще пропали ссылки, что делать?

Добавлено спустя 11 минут 8 секунд:
исправла обратно на ваш код.
не подскажите как мне осуществить мою идею?

Отредактировано slastnicova (20.01.2013 22:33:42)

0

Фифа · [1990-11-13]

я себе сломала мозг уже
не могу сделать "собственные кнопки" в меню

Код:

#navustav a {
background: url("http://s60.radikal.ru/i167/1302/46/02aba0f1e7ee.png") no-repeat transparent;
display: inline-block;
height: 35px;
width: 100px;
margin-left: 5px;
}

где ustav - название созданной страницы с "правилами" я правильно понимаю?
помогите...устала уже, раньше не сталкивалась ни разу с такими задачами)

Отредактировано Фифа (28.02.2013 13:19:12)

0

Lazary

Фифа

Lazary написал(а):

#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.

0

Фифа · [1990-11-13]

Lazary написал(а):

Фифа
Lazary написал(а):

#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.

Вот я и не врубаюсь)) где что и как надо заменить! в этом проблема...я слоу..
не могу я правильно понять, каких ссылок,куда добавленых, мне нужно переходы на созданные страницы сделать)) где, что куда скопировать правильно я все перепробовала перед гранью логики..за грань нормального уже скоро выползу!
форум есть в профиле

Отредактировано Фифа (28.02.2013 15:56:08)

0

Фифа · [1990-11-13]

В общем и кнопка "главная"..не хочет перекидывать на главную...вот собственно и приехали
и объяснить никто не может...

0

7 40 · [1994-03-21]

блин, везде копалась когда было нужно, а нашла только сейчас.
а можно сделать то же самое с пользовательскими ссылками?)

0

Эледвен

7 40
можно, и тут есть такой скрипт, и он так и называется

0

Эледвен

Делаю кнопки, вставляю хоть в стиль, хоть в HTML-верх, меню исчезает совсем.
Пишу вот так:

#pun-navlinks a {
display: inline-block;
margin-left: 5px;
}

#navindex a {background: url(http://savepic.ru/4185205.png) no-repeat top center;}

#pun-navlinks a span {display: none;}
</style>

Что неверно?

0

Вопросы по оформлению форумов, дизайну и css	Архив	14.12.2012
Вопросы по оформлению форума, дизайну и css (4)	Оформление форумов	21.01.2016
О разделе «Оформление форумов» + навигация по разделу	Оформление форумов	26.12.2012
Общие вопросы (9)	Поток сознания	20.03.2024
Первые шаги в создании популярного форума	Продвижение и раскрутка	13.09.2011

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

Информация о пользователе

Замена ссылок основного меню [css]

Сообщений 1 страница 20 из 47

Поделиться126.10.2010 13:21:49

Поделиться226.10.2010 13:39:16

Поделиться326.10.2010 15:30:30

Поделиться426.10.2010 18:30:55

Поделиться524.01.2011 23:04:06

Поделиться607.02.2011 18:58:31

Поделиться714.05.2011 13:50:54

Поделиться818.01.2013 23:39:06

Поделиться918.01.2013 23:43:31

Поделиться1019.01.2013 00:04:54

Поделиться1119.01.2013 01:38:12

Поделиться1219.01.2013 13:38:56

Поделиться1320.01.2013 22:22:34

Поделиться1428.02.2013 13:18:44

Поделиться1528.02.2013 14:25:08

Поделиться1628.02.2013 15:44:29

Поделиться1728.02.2013 23:47:24

Поделиться1801.03.2013 06:48:14

Поделиться1901.03.2013 09:53:20

Поделиться2001.03.2013 16:14:15

Похожие темы