رفتن به مطلب

درخواست کد ایجاد منو ثابت در اسکرول ؟


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

ببینید وقتی من این منو رو اضافی میکنم بالا

وقتی سایت باز میشه منو چسبیده به تب بالا و توی اسکرول دیگه بالا میمونه (تا اینجا مشکلی نیست )

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

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

http://www.download.ir/ منو چسبان

وقتی مقداری صفحه رو پایین میاریم نمایش داده بشه

لینک به ارسال

تا اینجا درست و عالی

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

مورد دوم تو مروگرها درست در سرجای خوش نیست.مثلا وقتی تنظیم میکنی 70% تو موزیلا خوب نشون میده اما توی کروم از کادر خارج شده !

لینک به ارسال

برای کاری که می خواهید باید jquery بدانید و برای اینکه در کنار این منو منوی اصلی هم وجود داشته باشه اول باید یک منو دیگه ایجاد کنید کدهای استایل فقط محتویات صفحات را از لحاظ رنگ و شکل و جایگاه مدیریت می کنند

مشخص کنید در منوتون دقیقا چه چیزی می خواهید نمایش داده بشه

مثلا

عناوین برگه ها

جستو

کلید دسترسی به خانه

....

و کدهای قبلی را حذف کنید تا سایت به حالت اول برگردد و به ازای نیازتون براتون کد کامل رو قرار بدم

لینک به ارسال

سلام خسته نباشید

دوستان این سایت رو مشاهده کنید

http://weblogina.com/

وقتی اسکرول رو پایین میاوردید

منو بالا ثابت هستش و همیشه در دسترسه (منو + جستجو و....)

post-2074-0-55275600-1368212025_thumb.pn

میخواستم بدونم چجوری باید این قابلیت رو به قالب اضافی کنم ممنون میشم .

تشکر

درود ...

ببینید این افزونه بدردتون میخوره یا نه ؟!

Fixed Menu :)

لینک به ارسال

برای کاری که می خواهید باید jquery بدانید و برای اینکه در کنار این منو منوی اصلی هم وجود داشته باشه اول باید یک منو دیگه ایجاد کنید کدهای استایل فقط محتویات صفحات را از لحاظ رنگ و شکل و جایگاه مدیریت می کنند

مشخص کنید در منوتون دقیقا چه چیزی می خواهید نمایش داده بشه

مثلا

عناوین برگه ها

جستو

کلید دسترسی به خانه

....

و کدهای قبلی را حذف کنید تا سایت به حالت اول برگردد و به ازای نیازتون براتون کد کامل رو قرار بدم

خوب استاد میتونید این کار رو برای ما انجام بدید ؟

لینک به ارسال

برای کاری که می خواهید باید jquery بدانید و برای اینکه در کنار این منو منوی اصلی هم وجود داشته باشه اول باید یک منو دیگه ایجاد کنید کدهای استایل فقط محتویات صفحات را از لحاظ رنگ و شکل و جایگاه مدیریت می کنند

مشخص کنید در منوتون دقیقا چه چیزی می خواهید نمایش داده بشه

مثلا

عناوین برگه ها

جستو

کلید دسترسی به خانه

....

و کدهای قبلی را حذف کنید تا سایت به حالت اول برگردد و به ازای نیازتون براتون کد کامل رو قرار بدم

بزرگواری بفرمائید همین مواردی را که عنوان کردید به عنوان نمونه بدید.بعد در صورت نیاز به اضافه کردن از طریق نمونه کد اضافه میکنم موارد رو.

لینک به ارسال

اول از همه چک کنید قالب به کتابخانه jquery متصل است یا خیر اگر نبود این کد را در header.php و قبل از بسته شدن تگ head وارد کنید


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

به کدهای style.css اضافه کنید


#wpparsitopmenu {
width:100%;
background-color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));
background-image: -webkit-linear-gradient(top, #000, #222);
background-image: -moz-linear-gradient(top, #000, #222);
background-image: -o-linear-gradient(top, #000, #222);
background-image: linear-gradient(to bottom, #000, #222);
position:fixed;
height:45px;
line-height:45px;
color:#FFFFFF;
z-index:99999;

}
#wpparsitopmenu .wpptmnav {
display:inline-block;list-style:none;float:right;margin-right:100px;
}
#wpparsitopmenu .wpptmnav li {
display:inline-block;padding-right:10px;
}
#wpparsitopmenu .wpptmnav li a,
#wpparsitopmenu .wpptmnav li a:link,
#wpparsitopmenu .wpptmnav li a:visited
{
text-decoration:none;color:#ccc;
}
#wpparsitopmenu .wpptmnav li a:hover,
#wpparsitopmenu .wpptmnav li a:active
{
text-decoration:none;color:#FFF;
}
#wpparsitopmenu form {
display:inline-block;
float:left;
margin-left:100px;
}
#wpparsitopmenu form input[type="text"] {
width:200px;
}
#wpparsitopmenu form input {
margin:0;
}

به کدهای footer.php و درست قبل از بسته شدن تگ body اضافه کنید


<div id="wpparsitopmenu">
<ul class="wpptmnav">
<li><a href="<?php bloginfo('url'); ?>/" rel="home" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php get_search_form(); ?>
</div>
<script type="text/javascript">
$('#wpparsitopmenu').hide();
function showDiv() {
if ($(window).scrollTop() > 450 && $('#wpparsitopmenu').data('positioned') == 'false') {
$("#wpparsitopmenu").hide().css({"position": "fixed", "top": "0px"}).fadeIn().data('positioned', 'true');
} else if ($(window).scrollTop() <= 450 && $('#wpparsitopmenu').data('positioned') == 'true') {
$("#wpparsitopmenu").fadeOut(function() {
$(this).css({"position": "fixed", "top": "-50px"}).show();
}).data('positioned', 'false');
}
}
$(window).scroll(showDiv);
$('#wpparsitopmenu').data('positioned', 'false');
</script>

توضیح کد با اینکه چک شده ممکنه در بعضی از قالب ها درست عمل نکنه که در اینصورت قالب باید برای jquery بهینه بشه برای این کار کلمه jquery را در همین انجمن جستجو کنید و بخوانید

لینک به ارسال

خیلی عالی و خوب.ممنون.مثل یک شـــــیر مرد داره کار میکنه.

اما چرا فقط تو مرورگر کروم خوب نشون میده؟

توی مرورگر IE درست نشون نمیده و توی Mozila هم به سمت چپ رفته و کاملا از کادر خارج شده و فقط یه تیکه ی مشکی معلومه! :huh:

لینک به ارسال

خیلی عالی و خوب.ممنون.مثل یک شـــــیر مرد داره کار میکنه.

اما چرا فقط تو مرورگر کروم خوب نشون میده؟

توی مرورگر IE درست نشون نمیده و توی Mozila هم به سمت چپ رفته و کاملا از کادر خارج شده و فقط یه تیکه ی مشکی معلومه! :huh:

کد رو فقط برای نمونه دادم

برای ie به استایل wpparsitopmenu اضافه کنید


zoom:1;

و برای موزیلا


left:0px;
right:0px;

هدف فقط اجرای jquery بود و الا استبیل و باقی تنظیمات رو می تونید با جستجو در همین سایت کامل کنید

لینک به ارسال

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

درباره ی رفع چند تا مشکل در این سایت جستجو کردم و تغییرات رو اعمال کردم اما متاسفانه برخی مشکلات رفع نشد.

اگه بزرگواری بفرمائید درباره ی این سه سوال زیر هم راهنمایی بفرمائید ممنون میشم.

1-متاسفانه در IE لینک ها به جای کنار هم بودن زیر هم هستن تصویر پیوست شده

2-آیا امکان این وجود دارد که زیر دسته هارو به صورت آبشاری در این بخش قرار داد ؟مثلا یک دسته اصلی که وقتی روش میایم زیر دسته هاش معلوم بشه.

3-برای اختصاص فونت اختصاصی برای این بخش باید چیکار کرد؟

تشکر فراوان

post-854-0-25984800-1368791324_thumb.jpg

لینک به ارسال
1-متاسفانه در IE لینک ها به جای کنار هم بودن زیر هم هستن تصویر پیوست شده

کدوم نسخه؟

2-آیا امکان این وجود دارد که زیر دسته هارو به صورت آبشاری در این بخش قرار داد ؟مثلا یک دسته اصلی که وقتی روش میایم زیر دسته هاش معلوم بشه.

بله

هم با css و هم با جی کوئری نمونه ش هم با نام superfish در انجمن معرفی شده

3-برای اختصاص فونت اختصاصی برای این بخش باید چیکار کرد؟

با توجه به نام کلاس یا آی دی:

.class{ font-family: font-name;}

لینک به ارسال

و یک توضیح اضافه کنم لایه اصلی رو با آی دی wpparsitopmenu قرار دادیم که اگر عینا کپی کرده باشید کدی که مرتضی عزیز دادند می شه


#wpparsitopmenu {font-family:font-name;}

در مورد زیر هم رفتن در ie این کد را در انتهای فوتر بگذارید یا زیر کد فراخوانی استایل در header.php و تست کنید


<!--[if IE]><style type="text/css">#wpparsitopmenu .wpptmnav li {float:right;}</style><![endif]-->

لینک به ارسال

کدوم نسخه؟

با IETester امتحان کردم و مشکلی ندیدم.ضاهرا مرورگر من زیادی قدیمیه. ;)

بدون مشکل فقط مرورگر زیر 8 منو درست نشون نمیده و اونجوری که تصویر رو پیوست کردم نشون میده ! راهی داره؟! یا بیخیال بشم!

لینک به ارسال

و یک توضیح اضافه کنم لایه اصلی رو با آی دی wpparsitopmenu قرار دادیم که اگر عینا کپی کرده باشید کدی که مرتضی عزیز دادند می شه


#wpparsitopmenu {font-family:font-name;}

در مورد زیر هم رفتن در ie این کد را در انتهای فوتر بگذارید یا زیر کد فراخوانی استایل در header.php و تست کنید


<!--[if IE]><style type="text/css">#wpparsitopmenu .wpptmnav li {float:right;}</style><![endif]-->

درباره ی فونت طبق دستوری که دادید کد رو در استایل قالب ریختم و فونت ST که قالبم از اون استفاده میکنه رو به جای font-name قرار دادم اما همچنان فونت اون Tahoma هست! :blink:

درباره کد IE هم انجام دادم اما همچنان منوها زیر هم قرار گرفتن و اسنادشم موجوده ^_^

لینک به ارسال

برای فونت آنلاین اول باید این کد را معرفی کنید محل فونت را با آدرس هاذ عوض کنید و نامی که در font-family تعیین می کنید را در کد قبلی قرار دهید در ضمن اسپل آی دی که گفتم را چک کنید باید دبلیو پی پارسی منو تاپ باشد شاید من اشتباه نوشته باشم

در مورد مشکل منو با آی ای فکر کنم تنها راهتنون ایجاد یک منو با مشخصات table برای IE باشه الان دارم میرم برای شام برگشتم کد اولیه اش رو می گذارم


@font-face {
font-family: 'WebFont';
src: url('myfont.eot'); /* IE6-8 */
src: local('☺'),
url('myfont.woff') format('woff'), /* FF3.6, IE9 */
url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
}

لینک به ارسال

برای فونت آنلاین اول باید این کد را معرفی کنید محل فونت را با آدرس هاذ عوض کنید و نامی که در font-family تعیین می کنید را در کد قبلی قرار دهید در ضمن اسپل آی دی که گفتم را چک کنید باید دبلیو پی پارسی منو تاپ باشد شاید من اشتباه نوشته باشم

در مورد مشکل منو با آی ای فکر کنم تنها راهتنون ایجاد یک منو با مشخصات table برای IE باشه الان دارم میرم برای شام برگشتم کد اولیه اش رو می گذارم


@font-face {
font-family: 'WebFont';
src: url('myfont.eot'); /* IE6-8 */
src: local('☺'),
url('myfont.woff') format('woff'), /* FF3.6, IE9 */
url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
}

مشکل IE حل شد. :D مـــــمنون.

فونت رو هم مجدد تست میکنم و اطلاع میدم :rolleyes:

لینک به ارسال

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


@font-face {
font-family: 'ST';
src: url('Font/ST.eot'); /* IE6-8 */
src: local('?'),
url('Font/ST.woff') format('woff'), /* FF3.6, IE9 */
url('Font/ST.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */

همچنین کدی که اول داده بودید بدون مشکل املایی بود و کد فوق رو هم در استایل قرار دادم


#wpparsitopmenu {font-family:ST;}

اما متاسفانه همچنان فونت Tahomaجلل خالق ! :huh:

لینک به ارسال

محل فونت هم درسته؟ پوشه فونت باید با F بزرگ نوشته شده باشه و در کنار فایل style.css باشه همچنین خود فونت در داخل پوشه باید از لحاظ بزرگی و کوچکی حروف تطبیق داشته باشه

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

اگر همه شرایط را داشت کد دوم را اینگونه اصلاح کنید


#wpparsitopmenu {font-family:'ST' !important, Arial;}

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

این کد راهم با کد قبلی IE تست بگیرید

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


<!--[if IE]><style type="text/css">#wpparsitopmenu .wpptmnav{min-width:75% !important;}#wpparsitopmenu .wpptmnav li {float:right !important;;clear:none; !important;}</style><![endif]-->

لینک به ارسال

در وسط صفحه می خواهید فیکسش کنید؟

باید اندازه عرضش رو به درصد بدید و فاصله چپ و راست منو را هم به درصد

افزونه ای که خواستید

http://wordpress.org...al/screenshots/

screenshot-3.png?r=711211

سلام . بحث بسیار خوبی بود.

ممنون جناب فخار، افزونه ی خیلی خوبی بود ولی حیف یکی از گزینه های منوش طبق شکل تبلیغات واسه خود سایت سازنده است. میخواستم اگه میشه لطف کنید و یه افزونه یا برنامه ای بدید که بشه باهاش همچین منویی ساخت و شخصی باشه، نه با تبلیغات. مثل خیلی از سایتها . ممنون

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

اگر باز تاهوما ماند بگید.

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

موارد فونت رو هم بررسی کردم و آدرس ها و ... درست هستند.به صورتی که حتی فونت ST که عرض کردم برای تیترها استفاده میکنم.با تست تونستم رنگ لینک رو تغییر بدم اما هرکاری میکنم نتونستم نوع فونت رو تغییر بدم ! :blink:

با تغییر کد


{
text-decoration:none;color:#ccc;

به


text-decoration:none;color:#ccc;font-size: 12px;

تونستم سایز فونت رو هم تغییر بدم

لازم به ذکر است فقط زمانی فونت خارج از Tahoma میشه که من کد فوق رو به صورت زیر بیرون میارم


text-decoration:none;color:#ccc;font-size: 12px;font-family: ST,times New Roman;

الان با این کد فونت از Thoma بیرون اومده و به همون times New Roman تبدیل شده.

طبق دستور شما یک فونت یونیکد شده از اینجا دریافت کردم و بعد از انتقال به هاست کدهای جدید رو طبق تغییرات زیر انجام دادم


}
@font-face {
font-family: 'BT';
src: url('Font/Yagutunc.eot'); /* IE6-8 */
src: local('?'),
url('Font/Yagutunc.woff') format('woff'), /* FF3.6, IE9 */
url('Font/Yagutunc.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
}

و کد


#wpparsitopmenu {font-family:'BT' !important, Arial;}

اما تغییر نکرد.

لازم به ذکر است اون راهی که خودمم گفتم با تغییر نام فونت باز هم به حالت times New Roman موند و چون تغییر مشاهده نشد تغییرات رو به حالت اول برگردوندم :huh: من دیگه دارم گیج میشم !

لینک به ارسال


#wpparsitopmenu ul li {font-family:'BT' !important, Arial;}

اگر جواب نداد بفرمایید تا با کد js مجابش کنیم

سلام . بحث بسیار خوبی بود.

ممنون جناب فخار، افزونه ی خیلی خوبی بود ولی حیف یکی از گزینه های منوش طبق شکل تبلیغات واسه خود سایت سازنده است. میخواستم اگه میشه لطف کنید و یه افزونه یا برنامه ای بدید که بشه باهاش همچین منویی ساخت و شخصی باشه، نه با تبلیغات. مثل خیلی از سایتها . ممنون

این هم برای شما

post-336-0-96540900-1368894305_thumb.jpg

در داخل پوشه فایل rahnama.html را بخوانید

wparsimenu.zip

لینک به ارسال
 #wpparsitopmenu ul li {font-family:'BT' !important, Arial;} 

اگر جواب نداد بفرمایید تا با کد js مجابش کنیم این هم برای شما

آقا واقعا دیگه روم نمیشه بگم نشد ! :D

اگه به جای این موضوع وقت گذاشته بودیم برای ساخت زیرمنو فکر کنم تا الان 500 تا زیر منو ساخته بودم ! ;)

در کل اصلا مگه چشه !؟ فونت tahoma به این خوشکلی ! :wub:

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

لینک به ارسال

در آخر footer.php و زیر کدهای منو اضافه کنید


<script type="text/javascript">
<!--
$("#wpparsitopmenu *").css( "font-family", "BT" );
//-->
</script>

یه چیز دیگه در استایلتون جستجو کنید فونت تاهوما به چه لایه هایی بدون قید کلاس و آی دی نسبت داده شده مثلا


p {font-family:Tahoma;}

که شامل تمام پاراگراف ها می شه

لینک به ارسال

در آخر footer.php و زیر کدهای منو اضافه کنید


<script type="text/javascript">
<!--
$("#wpparsitopmenu *").css( "font-family", "BT" );
//-->
</script>

یه چیز دیگه در استایلتون جستجو کنید فونت تاهوما به چه لایه هایی بدون قید کلاس و آی دی نسبت داده شده مثلا


p {font-family:Tahoma;}

که شامل تمام پاراگراف ها می شه

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

در استایل هم جستجو کردم و کدهای زیر مشاهده شد


* {
border: 0 none;
direction: rtl;
font-family: tahoma;
font-size: 12px;
margin: 0;
outline: 0 none;
padding: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
}
Va
}
.entry code {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #CCCCCC;
color: #333333;
display: block;
font-family: tahoma;
font-size: 0.9em;
line-height: 1.5em;
margin: 0 0 15px;
overflow: hidden;
padding: 10px;
}
Va
}
#date {
border-left: 1px solid;
color: white;
float: right;
font-family: tahoma;
font-size: 11px;
font-weight: normal;
height: 19px;
line-height: 16px;
padding: 3px 10px;
text-align: center;
width: 180px;
word-spacing: 1px;
}

لینک به ارسال

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


#wpparsitopmenu * {font-family:'BT' !important, Arial;}

لینک به ارسال

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

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

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

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

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

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

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

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

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