رفتن به مطلب

سوالی برای ایجا یک ستون خاص


پست های پیشنهاد شده

با سلام خدمت همه ی دوستان و اساتید ارجمند

دوستان عزیز کمک کنید تا من بتونم حداقل جواب این سوالم رو در این سال91 بگیرم و منم یه خاطره ی خوب از این انجمن داشته باشم... !!!؟؟؟

لطفن یه جوری راهنمایی کنید که می خواید یه بچه دبستانی رو الفبا یاد بدید!!! حالا که دیگه تعطیلید دوستان.

من می خوام یه ستون با ارتفاع کم و عرض مناسب و با 4 تب متفاوت برای سایتم قرار بدم، مثل ستون سمت چپ سایت زیر که دقیقا به همون شکل باشه و فقط تیتر عناوین و موضوعات داخلیش متفاوت باشه.

http://www.airport.ir/SitePages/Home.aspx ---- ستون سمت چپ و زیر "مناسبت ها"، نوشته: "فرودگاههای تحت نظارت و ..."

من تا حالا فقط تونستم ستونش رو با عرض و ارتفاع دلخواهم درست کنم، ولی توی بقیه ی مراحل اجراش موندم. میخوام دققا مثل همون ستون باشه مثلا وقتی میریم روی "پرتال های ستادی" زیر دسته هاش باز بشن و ... .

لطفن اگه باید فایل php یا ... جدیدی در قالب سایت اضافه کنم، یا باید تغییری در style.css بدم یا افزونه ای نصب بشه، یا ...، قدم به قدم بفرمایید، فکر می کنم یه آموزش خیلی خوبم واسه ی سایر افراد انجمن باشه که میخوان همچین ستونهایی داشته باشن.

پیشاپیش از کمکتون ممنونم و عیدتونم مبارک.

لینک به ارسال

دوستان من قبلن مثل این سوال رو مطرح کردم ولی جواب درستی نگرفتم. اگه میشه لطفن یه راه ساده تر بگید! :(

لینک به ارسال

شما اول باید بتونید سئوالتون را درست بپرسید تا واب درست بگیرید تا جایی که من فهمیدم چیزی که الان شما نیاز دارید استایل بندی و کدهای css هستش و ربطی به ستون کناری و مباحثی که در وردپرس داره نداره

ستون سمت چپ این سایت ترکیب js و css3 هست

اول کدهایی که می دم را در روی نوت پد بریزید و با پسوند html ذخیره کنید روی سیستمتون و با استفاده از نمایشگر اینترنت بازش کنید ببینید هر وقت دلخواهتون بود اون ها را به php تبدیل می کنیم و به سایتتون منتقل می کنیم


<style type="text/css">
#sidebar-new {
position:relative;
display:block;
height:270px;
width:240px;
margin:auto;
padding:0;
}
#sidebar-new div {
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
margin:0;
padding:5px;
overflow:hidden;
display:block;
}
#sidebar-new .new-w {
height:30px;
}
#sidebar-new .open {
height:180px;
}
#sidebar-new h3 {
line-height:30px;
text-align:center;
font-size:12px;
}
#w1 {
background:#CC9900
}
#w2 {
background:#99CC00
}
#w3 {
background:#FF0000
}
#w4 {
background:#3366FF
}
</style>
<script>
function newsidebar(Down)
{
document.getElementById('w1').className='new-w';
document.getElementById('w2').className='new-w';
document.getElementById('w3').className='new-w';
document.getElementById('w4').className='new-w';
document.getElementById(Down).className='open';
}
</script>
<div id="sidebar-new">
<div id="w1" class="open">
<h3 onclick="newsidebar('w1')">عنوان </h3>
</div>
<div id="w2" class="new-w">
<h3 onclick="newsidebar('w2')">عنوان </h3>
</div>
<div id="w3" class="new-w">
<h3 onclick="newsidebar('w3')">عنوان </h3>
</div>
<div id="w4" class="new-w">
<h3 onclick="newsidebar('w4')">عنوان </h3>
</div>
</div>

لینک به ارسال

خیلی ممنون از پاسخ مناسبتون. آره سوالم رو درست متوجه شدید. (قبلن این سوال رو به یه شیوه ی دیگه مطرح کرده بودم که متاسفانه جوابهای نامربوطی گرفتم. ممنون از شما.)

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

حالا باید چیکار کرد در قدم دوم جناب استاد گرامی؟

لینک به ارسال

این نمونه با کلید بر روی نام عناوین باز می شه البته اینکه با اشاره موس باز بشه راحت تره و دیگه به js هم نیاز نداره و می شه با خاصیت hover در css تنظیمش کرد موارد دیگه رو هم ببینیدتا کدش رو برای وردپرس براتون آماده کنم

لینک به ارسال

متوجه شدم. باید کلیک کنیم تا عنوانهای بعدیش نمایش داده بشن!(البته فقط واسه فایرفاکس کار کرد.)

ویرایش شده توسط karaneha
لینک به ارسال

سلام

سال نو مبارک

کدهای استایل بندی سری سه کلا روی اینترنت اکسپلور ورژن 7 و 8 به پایین کار نمی کنند و این یک مطلب عمومی است ولی باقی ویرایشگر ها پشتیبانی می کنند

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

فقط من هنوز نمی دونم داخل این منوها را چگونه می خواهید پر کنید این مسئله توی کد نویسی از اون لحاظ مهمه که بدونم اندازه ارتفاع هر فریم همیشه ثابته و یا ممکنه متغیر باشه و اینکه منبع تغذیه شون قرار با دستکاری کدها در هر سری تغییر کنه یا ابزارک مشخصی براشون می سازید اگر این اطلاعات را بدید یک کاریش می کنیم

لینک به ارسال

سلام

سال نو شما و سایر دوستان انجمن نیز مبارک باد.

من داخل یکی از اونها قراره "پیوندهای سایتم" رو قرار بدم،دقیقا مثل همون سایتی که معرفی کردم. داخل یکیشون قراره یه کد html پخش موزیک بذارم، داخل سومیش باز هم یک کد html یا یک عکس قرار بدم، و داخل آخریش قسمت ابتدایی یک برگه از برگه های سایتم( مثلا درباره ی ما، که داخلش پر از عکسه) رو قرار بدم( که واسه ی خوندن برگه ی کامل روی اون کلیک کنیم و به صفحه ی مورد نظر منتقل بشیم.).

خیلی ممنون . انشاالله منظورم رو متوجه شده باشید.

لینک به ارسال

مثلا اینجا:

http://css-tricks.com/snippets/jquery/simple-jquery-accordion/

لیست :

http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/

لینک به ارسال

سلام . خیلی ممنون از لینکهای خوبی که معرفی کردید آقا مرتضی.

فقط 2 تا سوال: فرض کنید من میخوام از لینک اولی که معرفی فرمودید استفاده کنم.

1- من داخل قالبم اصلا فایل جی کوئری ندارم، این قسمت دستورات جی کوئری رو کجا بریزم، اگه لازمه فایلی با پسوند js داخل تم سایتم آپلود کنم لطفا اسم دقیقش رو بفرمایید. چون دستورات css رو که میریزم داخل فایل style.css دستورات html اش رو هم میریزم داخل فایل php ای که مورد نظرمه، ولی واسه ی جی کوئری هاش نمیدونم چیکار کنم؟؟؟؟؟؟؟؟؟؟

2- این دستورات html رو بدون هیچ تغییری بریزم داخل php مشکلی نداره؟

یا لطفن مثلن طرز استفاده از کدهای سایت زیر رو واسم توضیح بدین من که هر کاری کردم نتونستم: :( :(

http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

ویرایش شده توسط karaneha
لینک به ارسال

اگه همون فایل html ای رو که آقای فخار در ابتدای بحث گذاشتن رو ادامش رو توضیح بدن،(بریم قدم بعدی) فکر میکنم بهتر باشه.!!!!

لینک به ارسال

این سری کدها را در فایل style.css ذخیره کنید


#sidebar-new {
position:relative;
display:block;
height:270px;
width:240px;
margin:auto;
padding:0;
}
#sidebar-new div {
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
margin:0;
padding:5px;
overflow:hidden;
display:block;
}
#sidebar-new .new-w {
height:30px;
}
#sidebar-new .open {
height:180px;
}
#sidebar-new h3 {
line-height:30px;
text-align:center;
font-size:12px;
}

اگر می خواهید به پس زمینه ها رگ هم بدهید این کدها را با رنگ های دلخواه اصلاح کنید و در ادامه کدهای قبل بگذارید


#w1 {
background:#CC9900
}
#w2 {
background:#99CC00
}
#w3 {
background:#FF0000
}
#w4 {
background:#3366FF
}

این کدها را در فایل header.php و قبل از بسته شدن تگ head


<script>
function newsidebar(Down)
{
document.getElementById('w1').className='new-w';
document.getElementById('w2').className='new-w';
document.getElementById('w3').className='new-w';
document.getElementById('w4').className='new-w';
document.getElementById(Down).className='open';
}
</script>

این کدها را در محلی که می خواهید منو نمایش داده شود


<div id="sidebar-new">
<div id="w1" class="open" onmouseover="newsidebar('w1')">
<h3>پیوندها </h3>
<ul><?php wp_list_bookmarks(); ?></ul>
</div>
<div id="w2" class="new-w" onmouseover="newsidebar('w2')">
<h3>موزیک </h3>
<!-- کد html موزیک -->
</div>
<div id="w3" class="new-w" onmouseover="newsidebar('w3')">
<h3>سوم عنوان </h3>
</div>
<div id="w4" class="new-w" onmouseover="newsidebar('w4')">
<h3>عنوان </h3>
<p>محتوای فریم آخر </p>
</div>
</div>

من تابع احضار پیوندها را قرار دادم و باقی را هم که خودتان ظاهرا کدهایشان را دارید و قرار می دهید

اگر خواستید عرض منو را کم یا زیاد کنید در اولین سری کدها که در style.css قرار دادید بگردید دنبال


width:240px;

و عددش را تغییر دهید

لینک به ارسال

سلام . خیلی ممنون از لینکهای خوبی که معرفی کردید آقا مرتضی.

فقط 2 تا سوال: فرض کنید من میخوام از لینک اولی که معرفی فرمودید استفاده کنم.

1- من داخل قالبم اصلا فایل جی کوئری ندارم، این قسمت دستورات جی کوئری رو کجا بریزم، اگه لازمه فایلی با پسوند js داخل تم سایتم آپلود کنم لطفا اسم دقیقش رو بفرمایید. چون دستورات css رو که میریزم داخل فایل style.css دستورات html اش رو هم میریزم داخل فایل php ای که مورد نظرمه، ولی واسه ی جی کوئری هاش نمیدونم چیکار کنم؟؟؟؟؟؟؟؟؟؟

2- این دستورات html رو بدون هیچ تغییری بریزم داخل php مشکلی نداره؟

یا لطفن مثلن طرز استفاده از کدهای سایت زیر رو واسم توضیح بدین من که هر کاری کردم نتونستم: :( :(

http://roshanbh.com....ing-jquery.html

آقای استاد ممنونم. درست شد. :D ولی اگه جواب 3 تا سوال بالا رو هم بدید دیگه کاملا همه چیزو در مورد طرز استفاده ی این کدا می فهمم!!! ممنون

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...