Electr0n

[Решено] Добавить символ в меню сайта

Рекомендуемые сообщения

Electr0n    1

Ребят подскажите пожалуйста, как добавить такие символы  к каждой под категории с помощью css?

Я просто написал в названии, но такой вариант к сожалению не устраивает. 

Вот сам символ:    › 

 

9MACQQc7KFg.jpg

 

Вот мой код css отвечающий за меню.

 

/* Menu
 
------------------------------------------------------------*/
 
 
 
#menu {
 
height: 50px;
 
margin-bottom: 10px;
 
//background: #7ECEFD;
 
//background: -moz-linear-gradient(top, #2185C5 100%, #2185C5 100%);
 
//background: -webkit-gradient(linear, center top, center bottom, color-stop(100%, #2185C5 ), color-stop(100%, #2185C5 ));
 
// -webkit-box-shadow: 0 8px 10px -8px #33506F,
 
inset 0 2px 0 -1px #3C93F5;
 
  // -moz-box-shadow: 0 8px 10px -8px #2185C5,
 
inset 0 2px 0 -1px #2185C5;
 
// box-shadow: 0 8px 10px -8px #969696,
 
inset 0 2px 0 -1px #06639E;
// border-bottom: 6px solid #7ECEFD;
//background: url("../image/menu1.png");
background: transparent linear-gradient(to bottom, #3498db 35%, #3498db 100%) repeat scroll 0% 0%;
}
 
#menu ul {
 
list-style: none;
 
margin: 0;
 
padding: 0;
 
}
 
#menu > ul > li {
 
position: relative;
 
float: left;
 
z-index: 20;
 
padding: 6px 5px 0 0;
 
border-right: 1px solid #3BA2E6;
 
// -webkit-box-shadow: 2px 0 0 -1px #78ADE8;
 
  //-moz-box-shadow: 2px 0 0 -1px #78ADE8;
 
// box-shadow: 2px 0 0 -1px #367ABC;
 
-webkit-transition: background .2s;
 
  -moz-transition: background .2s;
 
transition: background .2s;
 
}
 
#menu > ul > li:hover {
 
background: transparent linear-gradient(to bottom, #647382 15%, #48535F 100%) repeat scroll 0% 0%;
 
//background: #8BB724;
 
//-webkit-box-shadow: 0 0 0 0 #8BB724;
 
//  -moz-box-shadow: 0 0 0 0 #8BB724;
 
//box-shadow: 0 0 0 0 #8BB724;
 
}
 
#menu > ul > li > a {
 
font-size: 12px;
 
font-weight: bold;
 
color: #FFF;
 
line-height: 27px;
 
text-transform: uppercase;
 
text-decoration: none;
 
display: block;
 
padding: 6px 10px 6px 10px;
 
margin-bottom: 5px;
 
z-index: 6;
 
position: relative;
 
//-webkit-text-shadow: 0 1px 1px #5296D8;
 
//  -moz-text-shadow: 0 1px 1px #5296D8;
 
//text-shadow: 0 1px 1px #5296D8;
font-family: "Verdana",serif,arial;
}
 
#menu > ul > li:hover > a {
 
}
 
#menu > ul > li > div {
 
display: none;
 
/*background: #06639E;*/
 
        background: #FFFFFF;
 
position: absolute;
 
z-index: 5;
 
border: 2px solid #3498DB;
    box-shadow: 0  3px 3px #717171;
// border-top: 4px solid #2185C5;
}
 
#menu > ul > li:hover > div {
 
display: table;
 
}
 
#menu > ul > li > div > ul {
 
display: table-cell;
 
}
 
#menu > ul > li ul + ul {
 
padding-left: 20px;
 
}
 
#menu > ul > li ul > li > a {
 
text-decoration: none;
 
padding: 8px 20px 8px 20px;
 
        font-family: varela, Arial;
 
        text-transform: none;
 
font-size: 14px;
 
color: #2B2B2B;
 
display: block;
 
min-width: 120px;
white-space: nowrap;
font-family: "Verdana",serif,arial;
 //border-bottom: 1px dotted #FF6464;
 
 
}
 
#menu > ul > li ul > li > a:hover {
 
background: #4ECDC4;
 
        color: #fff;
 
}
 
/*#menu > ul > li > div > ul > li > a {
 
color: #06639E;
 
        text-transform: capitalize;
 
}*/
 
 
 

Изменено пользователем Electr0n

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

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

#menu > ul > li:after{

conten:"› ";

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Electr0n    1

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

#menu > ul > li:after{

conten:"› ";

}

Прописал в стилях 

#menu > ul > li:after{

content:"› ";

}

 

 

получилось так 

 

UB3SilR6cxk.jpg

 

Появилось но не там где нужно )) 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Electr0n    1

backgroundurl('../image/символ.png') no-repeat 0px 0px;

Нечего не изменилось. 

 

Закинул изображение в папку image (в шаблоне)

 

Прописал в стилях меню. 

Изменено пользователем Electr0n

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ArtemPitov    338

Прописал в стилях 

#menu > ul > li:after{

content:"› ";

}

 

 

получилось так 

 

UB3SilR6cxk.jpg

 

Появилось но не там где нужно )) 

#menu > ul > li > div > ul > li > a:after{

content:"› ";

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Electr0n    1

#menu > ul > li > div > ul > li > a:after{

content:"› ";

}

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

 

Т.е. вот так:

 

9MACQQc7KFg.jpg

 

Вот что получилось:

1jWxOUt1Qb0.jpg

Изменено пользователем Electr0n

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Electr0n    1

 

#menu > ul > li > div > ul > li > a:before{

content:"› ";

}

 

Спасибо огроменное ))

 

Вопрос решен. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу