0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 2132 Просмотров
*

Рэм

  • Новичок
  • 18
  • 1 / 0
Cоздать меню как на apple.com
« : 03.12.2012, 20:18:54 »
Всем доброго времени суток.
Встала задача о создании меню на сайте такого же стиля как и на  www.apple.com (верхнее серое меню).
Хочу сделать его только через CSS.
  • При создании столкнулся с проблемой совмещения 3-х бэкграундов в одном блоке (возможно ли такое?). Первый бэкграунд (закругленность слева) вставляю background-position:left, средняя часть - бэкграунд шириной в 1px, вставляю его репитом, третья чать (закругленность справа) вставляется, только при этом он оказывается под слоем бэкграунда с репитом. Как можно решить проблему? Либо закруглить обе стороны с помощью CSS?(тогда как?)
  • Вторая проблема - вставка сепараторов. Точнее вставляется все путем, вставляю его в каждый пунк бэкграундом background position:right, но при наведении на пункт меню, должен меняться фон...получается каряво все.
Помогите разрешить проблему. Есть ли рациональные способы решения?
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Cоздать меню как на apple.com
« Ответ #1 : 03.12.2012, 21:46:55 »
Сделайте фон для кнопок так, как я описывал в этой теме. Он займет a и span в меню. Сепаратор выставите фоном для li.
Все должно получиться.
*

SmiP

  • Захожу иногда
  • 225
  • 32 / 0
Re: Cоздать меню как на apple.com
« Ответ #2 : 03.12.2012, 22:30:04 »
Вот здесь расписано по пунктам как сделать
Навигация как на Apple.com средствами CSS3
http://ruseller.com/lessons.php?rub_id=2&id=1149
*

Рэм

  • Новичок
  • 18
  • 1 / 0
Re: Cоздать меню как на apple.com
« Ответ #3 : 04.12.2012, 13:40:52 »
Цитировать
Сделайте фон для кнопок так, как я описывал в этой теме. Он займет a и span в меню. Сепаратор выставите фоном для li.
Все должно получиться.
Цитировать
Вот здесь расписано по пунктам как сделать
Навигация как на Apple.com средствами CSS3
http://ruseller.com/lessons.php?rub_id=2&id=1149
Спасибо, сейчас взгляну.
*

Рэм

  • Новичок
  • 18
  • 1 / 0
Re: Cоздать меню как на apple.com
« Ответ #4 : 04.12.2012, 13:46:44 »
Цитировать
Вот здесь расписано по пунктам как сделать
Навигация как на Apple.com средствами CSS3
http://ruseller.com/lessons.php?rub_id=2&id=1149
Забавно, что в opera 12 меню отображается упрощенно. Разочарован.
Я читал эту статейку. стили применимы к меню Joomla?
*

Sliapy

  • Захожу иногда
  • 318
  • 48 / 4
Re: Cоздать меню как на apple.com
« Ответ #5 : 04.12.2012, 14:28:11 »
Думаю, никаких проблем с применением стилей не возникнет. Через CSS3 сделать будет проще, но будет менее кроссбраузерно, чем если сделать изображениями. Так что, в принципе, только Вам решать, какой из способов применить.
*

SmiP

  • Захожу иногда
  • 225
  • 32 / 0
Re: Cоздать меню как на apple.com
« Ответ #6 : 04.12.2012, 14:31:31 »
Допишите стили для Opera, там в комментариях есть пример.
*

Рэм

  • Новичок
  • 18
  • 1 / 0
Re: Cоздать меню как на apple.com
« Ответ #7 : 04.12.2012, 16:11:01 »
Спасибо большое. Разобрал стили эппловской менюшки. Чисто ее не использовал, но ход логики CSS понял, сделал свою такую же.
Сделал бэкграунд - репитнутые гифки, кроссбраузерно.

Всем еще раз, спасибо.
*

Рэм

  • Новичок
  • 18
  • 1 / 0
Re: Cоздать меню как на apple.com
« Ответ #8 : 04.12.2012, 18:45:48 »
Не буду создавать новую тему, суть одна.
На старничке http://www.apple.com/mac/, под вехним меню, которое я делал есть слайдер-меню.
Если есть какие либо решения по его созданию, буду благодарен.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Пункт меню

Автор s120367

Ответов: 0
Просмотров: 246
Последний ответ 03.06.2018, 13:02:55
от s120367
Большое меню Joomla

Автор Amakeeva

Ответов: 1
Просмотров: 414
Последний ответ 22.01.2018, 13:17:45
от effrit
Как можно отображать имя пользователя в название меню?

Автор selimoff

Ответов: 27
Просмотров: 3577
Последний ответ 02.01.2018, 15:24:44
от logan-19
как сделать пункт меню не кликабельным?

Автор qweqweqwe

Ответов: 13
Просмотров: 6418
Последний ответ 07.09.2017, 01:45:49
от forzi
Сдвинуть пункты меню в левое положение

Автор wectra

Ответов: 6
Просмотров: 679
Последний ответ 12.07.2017, 21:09:01
от wectra