Jump to content
Sign in to follow this  
Electr0n

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

Recommended Posts

Ребят подскажите пожалуйста, как добавить такие символы  к каждой под категории с помощью 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;
 
}*/
 
 
 

Edited by Electr0n

Share this post


Link to post
Share on other sites

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

#menu > ul > li:after{

conten:"› ";

}

Share this post


Link to post
Share on other sites

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

#menu > ul > li:after{

conten:"› ";

}

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

#menu > ul > li:after{

content:"› ";

}

 

 

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

 

UB3SilR6cxk.jpg

 

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

Share this post


Link to post
Share on other sites

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

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

 

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

 

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

Edited by Electr0n

Share this post


Link to post
Share on other sites

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

#menu > ul > li:after{

content:"› ";

}

 

 

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

 

UB3SilR6cxk.jpg

 

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

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

content:"› ";

}

Share this post


Link to post
Share on other sites

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

content:"› ";

}

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

 

Т.е. вот так:

 

9MACQQc7KFg.jpg

 

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

1jWxOUt1Qb0.jpg

Edited by Electr0n

Share this post


Link to post
Share on other sites

 

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

content:"› ";

}

 

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.