رفتن به مطلب

ایجاد منو بصورت تب


pary_daryayi

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

سلام دوستان . وقت بخیر .

میخوام مثل این سایت ( قسمت وسط صفحه ) منوهای اصلی رو بصورت تب ایجاد کنم .

ممنون میشم مراحلش رو بگین .

لینک به ارسال

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

شما برای هر li یک padding و بکگراند رنگ تعریف کنید

بعد هم به menu-item-current که برای صفحه جاری هست بگراند مجزا بدید.

لینک به ارسال

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

فقط برای نمایش محتوای هر تب مشکل دارم . هر تب محتواش از یک صفحه خونده میشه . در پیش فرض این لینک ، صفحات در پوشه ی pages گذاشته شدن و در فایل جی کوئری اینطور فراخوانی شدن:


var Tabs = {
'Tab one' : 'pages/page1.html',
'Tab two' : 'pages/page2.html',
'Tab three' : 'pages/page3.html',
'Tab four' : 'pages/page4.html'
}

من هم به خاطر نحوه ی قرار گرفتن پوشه هام این طور فراخوانی کردم :


var Tabs = {
'Tab one' : '../pages/page1.html',
'Tab two' : '../pages/page2.html',
'Tab three' : '../pages/page3.html',
'Tab four' : '../pages/page4.html'
}

اما هیچ محتوایی نشان داده نمیشه . در واقع صفحات page1 تا page4 رو نمیخونه .

نوع فراخوانیم مشکل داره ؟

ممنون

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

شما اگر در بخش پوسته میخواید استفاده کنید باید آدرس ها رو بصورت کامل و با اسم سایت قرار بدید

لینک به ارسال

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

این تب های ساده ی css تو ie ست نیستند و کاربرها هم اکثرا با ie کار میکنند . راهی هست که تب های این حالتی رو درست کرد ؟

من از این تب استفاده کردم که با رادیو باتن ساخته میشن .

تو ie9 تب ها غیر فعالند و در IE7 بصورت رادیوباتن هستند.

لینک به ارسال

تبی که داید اصلا فکر نکنم تا نسخه آخر ie درست نمایش داده بشه!

کلا ie با css های نسبتا جدید مشکل فنی داره!

لینک به ارسال

ممنونم ازتون . پس مجبورم از همون تب جی کوئری استفاده کنم . فقط یه سوال ؟ صفحات حتما باید در برگه ها تعریف بشن ؟ من میتونم 4 صفحه ی ساده ی page1 تا page4 درست کنم و کد مربوط به نمایش محتوایات رو درونشون بزارم و فراخوانی کنم ؟

لینک به ارسال

ممنونم ازتون . پس مجبورم از همون تب جی کوئری استفاده کنم . فقط یه سوال ؟ صفحات حتما باید در برگه ها تعریف بشن ؟ من میتونم 4 صفحه ی ساده ی page1 تا page4 درست کنم و کد مربوط به نمایش محتوایات رو درونشون بزارم و فراخوانی کنم ؟

در هردو صورت هم میشه.

میتونید دستی فایل های page1.html رو ایجاد کنید.

لینک به ارسال

یه نمونه با جاوااسکریپت و css پیدا کردم که تو ie هم ست هستش و دیگه نیاز به فراخوانی صفحات نیست نیست .

این لینک

این خیلی خوبه . فقط نمیدونم چرا با اینکه دقیقا کدها رو کپی میکنم و فایل js رو هم درست کپی و فراخوانی میکنم اما ie باز مشکل داره . در صورتی که لینکی که دادم تو ie مشکل نداره . یعنی من درست استفاده نکردم ؟

خیلی امتحان کردم

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

مشکل استایل رو حل کردم.

این لینک سایتی که دارم کار میکنم.

اما یک مشکل با صفحه بندیش دارم :

من یک تب بالای صفحه گذاشتم که اخبار , مقالات و ... رو نشون میده . مطالب رو صفحه بندی هم کردم . اما وقتی روی صفحه ی بعدی کلیک میکنم کل استایل بهم میریزه . من این تب رو در صفحات index , single,category و ... هم include کردم .

کد قسمتی از تب صفحه بندی اخبار :


<div id="tab1" class="contentt">
<ul class="new-news">
<?php
global $post;
$myposts = get_posts('numberposts=-1&offset=0&post_status=publish&posts_per_page=3&cat=1');
foreach($myposts as $post) :
setup_postdata($post);?>
<li class="recent_post_item">
<?php
if(has_post_thumbnail()) {
echo '<a href="'.get_permalink().'">';
echo get_the_post_thumbnail($post->ID, array(80,80) );
echo '</a>';
}?>
<a href="<?php the_permalink(); ?>" class="news-new">
<?php the_title(); ?></a>
</li>
<br/>
<?php endforeach; ?>
<?php wp_reset_query(); ?>
<div id="navigation"><?php posts_nav_link('-','قبلي','بعدي'); ?></div>
</ul>
</div>

البته پایین صفحات هم کل مطالب سایت صفحه بندی شده . وقتی حذف میکنم بهم ریختگی وجود نداره اما صفحه بندی کار نمیکنه . چطوری این تداخل رو حل کنم؟

یا حداقل فقط با تب کار کنم و صفحه بندیش کار کنه .

ممنون از دوستان

ویرایش شده توسط pary_daryayi
لینک به ارسال
  • 2 هفته بعد...

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

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

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

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

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

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

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

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

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