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

Объявление

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

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Замена ссылок основного меню [css]


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

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

1

Давно, очень давно существуют скрипты осуществляющие замену ссылок основного меню форума на картинки. Лично мне, реализация средствами 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

2

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

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

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

0

3

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

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

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

0

4

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

0

5

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

0

6

Lady cat

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

0

7

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

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

0

8

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

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

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

0

9

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

0

10

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

0

11

slastnicova

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

+1

12

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

0

13

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

код

/*Замена ссылок на картинки*/
#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

14

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

Код:
#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

15

Фифа

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

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

0

16

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

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

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


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

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

0

17

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

0

18

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

0

19

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

0

20

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

    <style type="text/css">

    #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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Замена ссылок основного меню [css]


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC