PDA

View Full Version : سوال: تغییر رنگ گزینه منو تا زمانیکه گزینه دیگر کلیک شود



871051
چهارشنبه 21 خرداد 1393, 12:34 عصر
با سلام

من در سایت با <ul> و <li> و<a> منویی ایجاد کردم.حالا می خوام وقتی کاربر بر روی یکی از لینک ها کلیک می کنه بک گراند و یا رنگ لینک مثلا قرمز شود و تا زمانیکه کاربر بر روی لینک دیگری کلیک نکرده این رنگ قرمز باقی بماند . زمانیکه کاربر بر روی لینک دیگری کلیک کرد لینک قبلی به رنگ پیش فرض در آید و لینک جدید قرمز شود. در ولقع می خوام مشخص شود که کدام لینک کلیک شده است.

<li id="resturan" ><pre><a class="glidebutton" href="/"> رستوران و کافی شاپ</a></pre></li> <li id="tafrihi"><pre><a class="glidebutton" href="/"> تفریحی و ورزشی</a></pre></li>
<li id="arayeshi" ><pre><a class="glidebutton" href="/"> آرایشی و بهداشتی</a></pre></li>
<li id="honari"><pre><a class="glidebutton" href="/"> فرهنگی و هنری</a></pre></li>
<li id="kala"><pre><a class="glidebutton" href="/"> کالا</a></pre></li>
<li id="kudak"><pre><a class="glidebutton" href="/"> کودک و نوجوان </a></pre></li>

mohsen.nsb44
چهارشنبه 21 خرداد 1393, 14:16 عصر
در مورد hover یه جستجو بزن خیلی سادست

mohsen.nsb44
چهارشنبه 21 خرداد 1393, 14:18 عصر
یه نمونه که تو سایت ارتمیس (http://www.artemis-anzali.com)انجام دادم رو برات گذاشتم بر اساس میلت رنگشو تغییر بده


<div align="center" class="menu">

<div style="width: 100%">


<div class="menu">


<li><a href="default.aspx">صفحه اصلی</a></li>
<li><a href="news.aspx">اخبار و اطلاعیه</a></li>
<li><a href="sale.aspx">تصاویر</a></li>



کد css



.menu {

height: 40px;



direction:rtl;

background: #4c4e5a;

background: -webkit-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);

background: -moz-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);

background: -o-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);

background: -ms-linear-gradient(top, #D8E3F6 0%,#2c4c10 100%);

background: linear-gradient(top,#D8E3F6 0%,#2c4d10 100%);



-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.menu li {

position: relative;

list-style: none;

float: right;

display: block;

height: 40px;


}

.menu li a {

display: block;

padding: 0 14px;

margin: 6px 0;

line-height: 28px;

text-decoration: none;



border-left: 1px solid #393942;

border-right: 1px solid #4f5058;



font-family: Tahoma, Arial, sans-serif;

font-weight: normal;

font-size: 12px;



color: #f3f3f3;

text-shadow: 1px 1px 1px rgba(0,0,0,.6);



-webkit-transition: color .2s ease-in-out;

-moz-transition: color .2s ease-in-out;

-o-transition: color .2s ease-in-out;

-ms-transition: color .2s ease-in-out;

transition: color .2s ease-in-out;

}



.menu li:first-child a { border-left: none; }

.menu li:last-child a{ border-right: none; }



.menu li:hover > a { color: yellow; }

.menu ul {

position: absolute;

top: 40px;

right: 0;

opacity: 0;

background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;

-moz-transition: opacity .25s ease .1s;

-o-transition: opacity .25s ease .1s;

-ms-transition: opacity .25s ease .1s;

transition: opacity .25s ease .1s;

}



.menu li:hover > ul { opacity: 1; }



.menu ul li {

height: 0;

overflow: hidden;

padding: 0;

-webkit-transition: height .25s ease .1s;

-moz-transition: height .25s ease .1s;

-o-transition: height .25s ease .1s;

-ms-transition: height .25s ease .1s;

transition: height .25s ease .1s;

}



.menu li:hover > ul li {

height: 36px;

overflow: visible;

padding: 0;

direction:rtl;

}


.menu ul li a {

width: 100px;

padding: 4px 30px 4px 0;

margin: 0;

border: none;

border-bottom: 1px solid #353539;

}



.menu ul li:last-child a { border: none; }

871051
پنج شنبه 22 خرداد 1393, 10:10 صبح
سلام
ممنون از وقتی که گذاشتی ولی منظور من اصلا این نبود. من می خوام بعد از اینکه روی یکی از لنک ها کلیک شد اون لینک تا زمانیکه صفحه مربوط بهش باز هست و لینک دیگه ای کلیک نشده مثلا رنگش سبز باقی بمونه (یعنی همه لینک ها فرضا آبی لینکی که کلیک شده سبز) و بعد از کلیک شدن روی یک لینک دیگه که ممکنه 2 ساعت بعد کلیک بشه باز همه لینک ها فرضا آبی لینکی که کلیک شده سبز و بهمین ترتیب.

kavayo
پنج شنبه 22 خرداد 1393, 16:07 عصر
شما میتونید با جی کوئری این کار رو انجام بدید بدین صورت که یه کلاس css تعریف کنید که مثلا دکمه مورد مورد نظر بعد از کلیک کردن سبز شود سپس با جئ کوئری هر لینکی که صدا زده میشه این کلاس css بدان افزوده شود و از لینک دیگر این کلاس حذف شود

aroshanzamir
پنج شنبه 22 خرداد 1393, 19:12 عصر
شما می تونید با دستورات css این کار را انجام بدهید
1-Visited 2-active

871051
شنبه 24 خرداد 1393, 00:05 صبح
سلام جناب kavayo (http://barnamenevis.org/member.php?162544-kavayo)
ممکنه یه نمونه کد برام بذارید لطفا