Полная Версия: Как сделать дырку в меню?
В общем нужно как-то сделать, чтоб в наведённом пункте меню появлялась дырка в виде стрелочки, как на картинке. Как сделать - ума не приложу. У вас есть какие-то идеи на этот счёт?
картинкой, наверное, проще всего будет сделать
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
Да, картинкой наверное быстрее, но, как вариант:
Разбить меню на 3 части:
0-нулевая верхняя цельная полоска это слова
нижняя - состоит из двух, 1 и 2, которые соединяются в выбранном пункте
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.
Разбить меню на 3 части:
0-нулевая верхняя цельная полоска это слова
нижняя - состоит из двух, 1 и 2, которые соединяются в выбранном пункте
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.
1 - слева
2 - справа
3 - центр, картинка-дырка
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
2 - справа
3 - центр, картинка-дырка
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
| Цитата |
| 1 - слева 2 - справа 3 - центр, картинка-дырка |
Ну да это проще...но, как вариант можно все таки и без картинки обойтись.
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.
| Цитата (ABC @ 2.10.2014 - 16:36) |
| Да, картинкой наверное быстрее, но, как вариант: Разбить меню на 3 части: 0-нулевая верхняя цельная полоска это слова нижняя - состоит из двух, 1 и 2, которые соединяются в выбранном пункте |
это получается, левая и правая часть должны быть очень длинными. А как тогда быть со скруглениями меню по бокам?
| Цитата (Invis1ble @ 2.10.2014 - 16:26) |
| картинкой, наверное, проще всего будет сделать |
Картинкой в смысле спрайтом? Спрайт к пунктам меню применять, правильно? Если да, то как быть с разным размером пунктов меню? Для каждого пункта свой спрайт, или можно как-то по другому? Т.к. если один и тот же спрайт ко всем пунктам применять - то он будет где-то уже, где-то наоборот растянутым
Ну если поиграть с радиусами, скажем на A и B поставить побольше, а на C и D поменьше, или наоборот, а может вообще сделать их раздельными с разных дивов, например.
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.
| Цитата |
| Картинкой в смысле спрайтом? |
Где она будет расположена в спрайте или самостоятельно, это уже вопрос размещения, главное ее откуда - то вытащить.
Если картинкой решили, просто без спрайта сначала сделайте. Вырежьте этот кусочек (в красном ) аккуратно и попробуйте, как будет смотрется.
_____________
Не тот велик, кто не падал, а тот кто падал и поднимался.
Просто если картинку просто поверх меню ставить - то она не сделает то место, в которое я её вставлю, прозрачной. Под ней будет фон, и он никуда не исчезнет. Вот в чём проблема.
сделать прозрачным ?? .. может и можно но я не встречал такого .. обычно делают картинку с цветом нужного бекграунда ... на :hover поставь background:url(images/my_image.jpg) no-repeat center bottom; где my_image.jpg - это твоя "дырка" а по сути треугольник с цветом фона страницы под меню . и Усё...
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
| Цитата (andrey888 @ 2.10.2014 - 20:15) |
| треугольник с цветом фона страницы под меню |
В том и проблема, что под меню - картинка. Но путём геморроя, онанизма и танцев с бубном, за каких-то 3 часа, проблема решена. Всем спасибо за внимание и потраченное время
| Цитата (Altai @ 3.10.2014 - 01:19) |
| Но путём геморроя, онанизма и танцев с бубном, за каких-то 3 часа, проблема решена. |
Ну ты, батенька, просто гигант шаманизма
Чё-та я пропустил эту тему... Я бы, возможно, сделал просто "в лоб" и безо всяких бубнов.
Делаем фоновую картинку с нужной прорезью (хоть треугольная она будет, хоть фигурная). В формате PNG, чтобы можно было полную прозрачность задать этому вырезу. И просто выставляем для бэкграунда положение этой картинки, в зависимости от выбранного пункта меню. Всё. Задача решена.
А прорезь можно будет сделать, например, в виде круглой дырки. И пусть через нее будет видно основной бэкграунд...
Заодно и закругления у углов можно будет задать любые, бэкграунд не помешает их сделать.
И даже более того... Можно сделать анимацию, чтобы этот вырез красиво и плавно переходил в нужное место, без скачков.
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
| Цитата (andrey888 @ 2.10.2014 - 20:15) |
| сделать прозрачным ?? .. может и можно но я не встречал такого .. |
Делается достаточно легко
Для примера вот: http://owndesign.ru/tests/transp/transp.php
Нажимая кнопки справа-вверху, меняешь положение полупрозрачной круглой картинки, можешь оценить, как она смотрится на разном фоне. Кроме большой картинки, используемой в качестве фона, можно изменять цвет фона вокруг картинки (кнопки справа-внизу).
На всякий случай уточняю, что это я сделал... В центре кольца частичная прозрачность, для создание эффекта стекла и картинки на нем (плюс еще отражение света), а вокруг кольца полная прозрачность. Формат PNG позволяет много чего сделать...
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
Можно как то так, но не знаю что с градиентом делать
_____________
Промокод предоставляет скидку на заказ домена и/или хостинга reg.ru
BFCC-3895-8804-9ED2
<style>
.menu {
width: 900px;
}
.head, .left, .right {
background: #eab92d;
}
.left, .right {
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 0 0 0 ,0px 3px 2px #d5d5d5,0px 4px 8px #d5d5d5;
-moz-box-shadow: 0 0 0 ,0px 3px 2px #d5d5d5,0px 4px 8px #d5d5d5;
-webkit-box-shadow: 0 0 0 ,0px 3px 2px #d5d5d5,0px 4px 8px #d5d5d5;
}
.left {
width: 200px;
height: 10px;
float: left;
}
.right {
width: 700px;
height: 10px;
float: right;
}
</style>
<div class="menu">
<div class="head">
<ul>
<li>Главная</li>
<li>Не главная</li>
</ul>
</div>
<div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
_____________
Промокод предоставляет скидку на заказ домена и/или хостинга reg.ru
BFCC-3895-8804-9ED2
Здесь расположена полная версия этой страницы.