Blood

رنگ منوی متمایز از بقه منوها در وردپرس

14 پست در این موضوع قرار دارد

با سلام

در منوی سایتم میخوام یکی از منوهام که نه فعال نه کلیکی شده روش رنگش با بقیه فرق داشته باشه به چه صورت این کار رو انجام بدم این هم کد css منوهام هستش


/* =NAVIGATION
----------------------------------------------- */
nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
.main-navigation li.default-menu,
li.default-menu {
}
.main-navigation a {
width:189px;
float: right;
line-height:70px

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {

background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}


nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
height:30px;
line-height:30px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
height:70px;
line-height:70px;
}
nav ul:after {
}
nav ul li {
float: right;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

}
nav ul li:hover {
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
text-decoration: none;
font-size: 16px;
text-align:center;
color: #fff;
width:189px;

}


nav ul ul {
width:188px;
position: absolute;
border-top: 1px solid #BFE7FE;

}
nav ul ul li{
float: none;
background:#248FCA;
position: relative;
z-index: 999;
}
nav ul ul li a {
font-size: 14px;
color: #fff;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
nav ul ul li a:hover
{
background: #78CCFD;
width:189px;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.current-cat , .current_page_item , .current-cat-parent{
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
ul.children li.current-cat {
background:#78CCFD !important;
}
ul li.current-cat ,li li.current_page_item ,li li.current-cat-parent{
background:#78CCFD;
width:188px;
}

0

به اشتراک گذاری این پست


لینک به پست

به طور کل:

ul li:nth-child(3) {
color: red;
}

اون 3 یعنی سومین المنت رو انتخاب کرده...

2

به اشتراک گذاری این پست


لینک به پست

به طور کل:

ul li:nth-child(3) {
color: red;
}

اون 3 یعنی سومین المنت رو انتخاب کرده...

تغییری ایجاد نشد ؟

0

به اشتراک گذاری این پست


لینک به پست

تغییری ایجاد نشد ؟

سلام

برای این نوع سوالات بهتره آدرس آنلاین بزارید که تایپک اسپم باران نشه و سردرگم نشید.

1

به اشتراک گذاری این پست


لینک به پست

www.rahboord.com

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

www.rahboord.com

دوست عزیز من استایل آقای نظری رو تست کردم مشکلی نداشت در هر صورت شما هر کدوم از منوهاتون کلاس جداگانه داره و می تونید استایل متفاوتی برای تک تکشون اعمال کنید.


class="page_item page-item-6 page_item_has_children"
class="page_item page-item-2 page_item_has_children"

ویرایش شده در توسط hamidwi
2

به اشتراک گذاری این پست


لینک به پست

از کجا اعمال کنم ؟ بخوام css رو اعمال کنم به چه صورت این کار رو انجام بدم من کد رو قرار دادم اما نشون نداد ؟

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

این استایل رو به آخر فایل style.css قالبتون اضافه کنید.


.page-item-14{
background-color: #1173B2;
}

برای تغییر منو کلاس li مورد نظر رو جایگزین کنید برای تغییر رنگ هم کد رنگ رو جایگزین کنید.

کد رنگ = #1173B2

کلاس page-item-14 = li

ویرایش شده در توسط hamidwi
0

به اشتراک گذاری این پست


لینک به پست

باز رنگ منو عوض نشد

یعنی واقعا اینقدر کار سختیه؟؟؟؟؟؟

یکی از منو هام میخوام رنگش با بقیه فرق کنه همین

0

به اشتراک گذاری این پست


لینک به پست

عزیز من ما به شما عین راه حل رو گفتیم... اونوقت از دست شما بر نمیاد مشکل ما هست؟

1

به اشتراک گذاری این پست


لینک به پست

بفرمایید: اینم از منویی که رنگ هاش متمایز شده.. شماره سه و شماره پنج رنگشون فرق داره، کد سی اس اس و اچ تی ام الش هم موجوده تا متوجه بشید...

http://codepen.io/m-nazari/pen/xhLAH/?editors=110#0

2

به اشتراک گذاری این پست


لینک به پست

من از عکس و رنگ در منو هام استفاده کردم این هم فایل css من هست

تمام کارهایی که فرمودید رو انجام دادم اما...

ملاحضه بفرمایید؟


nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
.main-navigation li.default-menu,
li.default-menu {
}
.main-navigation a {
width:189px;
float: right;
line-height:70px

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {

background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}


nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
height:30px;
line-height:30px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
height:70px;
line-height:70px;
}
nav ul:after {
}
nav ul li {
float: right;
background: transparent url(images/Menu-Image.png);
background-color:#89D2FD;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

}
nav ul li:hover {
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block;
text-decoration: none;
font-size: 16px;
text-align:center;
color: #fff;
width:189px;

}


nav ul ul {
width:188px;
position: absolute;
border-top: 1px solid #BFE7FE;

}
nav ul ul li{
float: none;
background:#248FCA;
position: relative;
z-index: 999;
}
nav ul ul li a {
font-size: 14px;
color: #fff;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
nav ul ul li a:hover
{
background: #78CCFD;
width:189px;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.current-cat , .current_page_item , .current-cat-parent{
background:#248FCA;
border-left:0.1em solid #B8E4FE;
width:188px;
}
ul.children li.current-cat {
background:#78CCFD !important;
}
ul li.current-cat ,li li.current_page_item ,li li.current-cat-parent{
background:#78CCFD;
width:188px;
}

0

به اشتراک گذاری این پست


لینک به پست

کدی که شما باید قرار بدید(فرق نداره کجای فایل استایل قرار میدید.) اینه:


nav .menu ul li:nth-child(3) {
background:red;
}

حالا بجای ' red ' باید یه چیز دیگه بزارید و بجای عدد سه که یعنی سومین فرزند باید یه عدد دیگه بزارید... منتهی یه مشکل اساسی داره و اونم اینه که سومین فرزند از همه منو ها و زیر منو ها متمایز میشه... که من بلد نیستم حلش کنم دوستان دیگه هستند و جواب میدن(امیدوارم جواب بدن، از حیطه علم من خارج هست چون تخصص من این نیست..)

0

به اشتراک گذاری این پست


لینک به پست

اگر مثال آقای نظری رو به اینصورت بنویسید مشکلتون حل میشه.


.page-item-6 {
background:red;
}

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری