Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Сверстать треугольник в подменю

Обсуждение темы Сверстать треугольник в подменю в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте! Помогите, делаю дизайн и это моя первая работа. Нарисовал, верстаю из PSD. Но не знаю как сделать треугольник в меню при открытии....


Закрытая тема
 
Опции темы
Старый 16.11.2015, 22:11   #1
Здравствуйте! Помогите, делаю дизайн и это моя первая работа. Нарисовал, верстаю из PSD. Но не знаю как сделать треугольник в меню при открытии.
Изображения
Тип файла: jpg sshot-1.jpg (37.2 Кб, 13 просмотров)
 
Старый 16.11.2015, 22:11
Ссылки
Старый 17.11.2015, 10:42   #2
сохрани его в png или svg и поставь сверху... или я что то не понимаю? можно еще задвинуть margin-ом margin-top: -20px (размер треугольника)
 
Старый 17.11.2015, 11:35   #3
Цитата:
Сообщение от Hispanic Посмотреть сообщение
сохрани его в png или svg и поставь сверху... или я что то не понимаю? можно еще задвинуть margin-ом margin-top: -20px (размер треугольника)
Вот именно как поставить? Кнопка из трёх полос картинка, дальше открывается меню при наведении, в это меню не могу внедрить треугольник. Если можно то без картинки нарисовать на css треугольник

PHP код:
<div id="nav">
            <
li><a href="#"><img class="button_top" src="/images/button_top.png"></img></a>
            <
ul>
               <
li><a href="#">Все категории</a></li>
               <
li><a href="#">Все эксперты</a></li>
               <
li><a href="#">Все статьи</a></li>
               <
li><a href="#">Рекламные статьи</a></li>
               <
li><a href="#">Реклама</a></li>
               <
hr>
               <
li><a href="#">Войти</a></li>
               <
li><a href="#">Зарегистрироваться</a></li>
             </
ul>
           </
li>
           </
div
PHP код:
#nav,#nav li ul{
  
margin:0px;
  
padding:0px;
  list-
style:none;
  
margin-top:-50px;
  
margin-right:15px;
}
#nav > li{
  
float:right;
  
width:50px;
}
#nav li ul{
  
display:none;
  
background-imageurl(/images/arrow_menu.pngno-repeat;
  
position:absolute;
  
z-index:100;
  
width:180px;
  
margin-left:-116px;
  
height:230px;
  
box-shadow0 0 0.4em 0.4em rgba(122,122,122,0.1);
  
border-radius0 0 5px 5px;
}
#nav li:hover ul {display:block;margin-top:10px;}
#nav > li{
  
text-align:center;
  
padding:10px 0px 10px 0px;
}

#nav > li > a{
  
font14px ArialVerdanasans-serif;
  
color:#000000;
  
text-decoration:none;
  
text-transform:uppercase;
}
#nav li ul{
  
margin-top:10px;
  
background-color:#ffffff;
  
border:1px solid #E8E8E8;
}

#nav li ul li{
  
text-align:left;
  
padding:5px 5px 5px 15px;
}

#nav li ul li a{
  
font14px ArialVerdanasans-serif;
  
color:#9b9b9b;
  
text-decoration:none;
}

#nav li ul li a:hover{
  
font14px ArialVerdanasans-serif;
  
color:#9b9b9b;
  
text-decoration:none;
}
.
button_top {
    
margin-bottom:-5px;
    
margin-left:15px;
}
.
button_top:hover {
    
margin-bottom:-5px;
    
margin-left:15px;
    
background-color:#4373CA;

 
Старый 17.11.2015, 13:48   #4
выложи вес шаблон, я тебе помогу! желательно архивам. И шаблон psd вложи.
P.S. я не буду воровать твой дизайн

Последний раз редактировалось mamon-88; 17.11.2015 в 13:55..
 
Старый 17.11.2015, 14:00   #5
Цитата:
Сообщение от mamon-88 Посмотреть сообщение
выложи вес шаблон, я тебе помогу! желательно архивам. И шаблон psd вложи.
P.S. я не буду воровать твой дизайн
Уже помогли, оказалось просто
 
Старый 19.11.2015, 04:17   #6
Треугольник можно было сделать на чистом CSS
 
Старый 19.11.2015, 14:38   #7
я думаю человек который задает такие вопросы врятли разберется...
 
Старый 20.11.2015, 12:56   #8
background: #fff url(треугольник) no-repeat
padding-top: 20px;
background-position: 0px 0px <-- тут треугольник кидаешь вверх
 
Старый 20.11.2015, 12:56
Закрытая тема

Метки
сверстать треугольник, треугольник в подменю


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно сверстать и установить дизайн chellos Вакансии 4 25.04.2013 15:26
Нужно сверстать макет bananarespublik Вакансии 3 28.08.2012 07:07
Декорация подменю CSS3 inc1uder Кальянная 2 15.03.2012 08:24
Как сверстать это? FoX HTML, CSS, JavaScript 5 24.08.2011 11:27
Помогите сверстать без таблицы Ярослава HTML, CSS, JavaScript 3 21.09.2008 11:15


Текущее время: 01:33. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум