siamakb

نیاز به منو با کد css جهت طراحی قالب

آغاز شده توسط: siamakb,

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

ارسال شده در

سلام.

امیدوارم خوب باشید.

نیاز به منو با کد css داشتم برای طرحی قالب جوملا.

ممنون میشم راهنمایی بفرمائید.

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

سلام.

امیدوارم خوب باشید.

نیاز به منو با کد css داشتم برای طرحی قالب جوملا.

ممنون میشم راهنمایی بفرمائید.

#topmenu .menu{list-style-type: none; height: 40px; padding: 0; margin: 0;}
#topmenu .menu li { float:right; position: relative; padding: 0; line-height: 32px;margin-top:3px; }
#topmenu .menu li:hover { background-position: 0 -40px; }
#topmenu .menu li a { display: block; padding: 0 15px; color:#FFFFFF; text-decoration: none;-webkit-transition: background 1s,height 1s,color 1s; }
#topmenu .menu li a:hover { color:#FF6666; background:#666666; height:34px;}
#topmenu .menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#8B0017; list-style-type: none; padding: 0; margin: 0; }
#topmenu .menu li:hover ul { opacity: 1; }
#topmenu .menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#topmenu .menu li:hover ul li { height: 30px; line-height: 30px; }
#topmenu .menu li ul li a { background: #8B0017;}
#topmenu .menu ul li a:hover { background:#790014; }
#topmenu .menu li { -webkit-transition: all 0.2s; }
#topmenu .menu li a { -webkit-transition: all 0.5s; }
#topmenu .menu li ul { -webkit-transition: all 1s; }
#topmenu .menu li ul li { -webkit-transition: height 0.5s; }

این منو را با زیر منو ها برات میسازه

Share this post

Link to post
Share on other sites

ارسال شده در

ممنون از پاسخ سریعتون.

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

<div id="topmenu">
<jdoc:include type="modules" name="topmenu" style="xhtml" />
</div>

با تشکر فراوان.

Share this post

Link to post
Share on other sites

ارسال شده در

شرطش رو باید بذارید

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

و کدهاش جایگذاری کنید .

Share this post

Link to post
Share on other sites

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

#topmenu .menu{list-style-type: none; height: 40px; padding: 0; margin: 0;}
#topmenu .menu li { float:right; position: relative; padding: 0; line-height: 32px;margin-top:3px; }
#topmenu .menu li:hover { background-position: 0 -40px; }
#topmenu .menu li a { display: block; padding: 0 15px; color:#FFFFFF; text-decoration: none;-webkit-transition: background 1s,height 1s,color 1s; }
#topmenu .menu li a:hover { color:#FF6666; background:#666666; height:34px;}
#topmenu .menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#8B0017; list-style-type: none; padding: 0; margin: 0; }
#topmenu .menu li:hover ul { opacity: 1; }
#topmenu .menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#topmenu .menu li:hover ul li { height: 30px; line-height: 30px; }
#topmenu .menu li ul li a { background: #8B0017;}
#topmenu .menu ul li a:hover { background:#790014; }
#topmenu .menu li { -webkit-transition: all 0.2s; }
#topmenu .menu li a { -webkit-transition: all 0.5s; }
#topmenu .menu li ul { -webkit-transition: all 1s; }
#topmenu .menu li ul li { -webkit-transition: height 0.5s; }

این منو را با زیر منو ها برات میسازه

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

لطفا رانمایی بفرمائید.

ویرایش شده در توسط siamakb

Share this post

Link to post
Share on other sites

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

برای طراحی منو چه افقی و چه عمودی کافیست با افزونه فایر باگ و یا webDeveloper چک کنید ببیند اون منو در کدام قسمت یا Div قرار دارد . بعد خیلی راحت کدهای بیسک در ارتباط با منو در سایتهای مختلف وجود دارد ... فقط حتما به این موضوع توجه کنید که داخل تگهای li هیچ کلاس یا آی.دی دیگری قرار نگرفته باشد .

تا اونجا که میدونم و عقلم بهم میگه منو های موجود در قالب جوملا فک کنم با کلاس ul.menu شروع می شود ... شما فقط کافیست در طراحی قالب یک DIV قرار دهید و کد ماژول زیر را قرار دهید ::

<div id="topmenu">
<jdoc:include type="modules" name="topmenu" style="xhtml" />
</div>

حال در کدهای سی.اس.اس به صورت زیر عمل کنید ::

#topmenu ul.menu{list-style-type: none; height: 40px; padding: 0; margin: 0;}
#topmenu ul.menu li { float:right; position: relative; padding: 0; line-height: 32px;margin-top:3px; }
#topmenu ul.menu li:hover { background-position: 0 -40px; }
#topmenu ul.menu li a { display: block; padding: 0 15px; color:#FFFFFF; text-decoration: none;-webkit-transition: background 1s,height 1s,color 1s; }
#topmenu ul.menu li a:hover { color:#FF6666; background:#666666; height:34px;}
#topmenu ul.menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#8B0017; list-style-type: none; padding: 0; margin: 0; }
#topmenu ul.menu li:hover ul { opacity: 1; }
#topmenu ul.menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#topmenu ul.menu li:hover ul li { height: 30px; line-height: 30px; }
#topmenu ul.menu li ul li a { background: #8B0017;}
#topmenu ul.menu ul li a:hover { background:#790014; }
#topmenu ul.menu li { -webkit-transition: all 0.2s; }
#topmenu ul.menu li a { -webkit-transition: all 0.5s; }
#topmenu ul.menu li ul { -webkit-transition: all 1s; }
#topmenu ul.menu li ul li { -webkit-transition: height 0.5s; }

همیشه در قسمت اول کدهای CSS مربوط به منو که با menu. شروع شده یه ul هم کنارش قرار بده که بشه Ul.menu اما همیشه اینو به خاطر بسپار که حتما برای اینکه بگی منو های کدوم قسمت حتما از DIV کمک بگیر و در اول کدهات NameDIV# استفاده کن . چون اگر این کار نکنی جوملا همه منوهای موجود در سایتت رو به یک سی.اس.اس تقسیم میکند////

نکته : من کدهای پست دوم همین تاپیک کپی و پیست کردم و چک نکردم ببینم درست کار میکنه یا نه اما اصول کار بدین صورت است. این کدها داخل لوکال هم کار میکنه و اگر مشکلی وجود داره مشکل رو ذکر کنید تا بررسی بشود ...

موفق باشید . مهدی :25:

ویرایش شده در توسط m3hdi
1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

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

به دلیل تکرار دوباره این پست مطالبش حذف می شود .

ویرایش شده در توسط m3hdi
به دلیل تکرار دوباره پست این پست مطالبش حذف می شود .

Share this post

Link to post
Share on other sites

ارسال شده در

ممنون از پاسخ سریعتون.

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

<div id="topmenu">
<jdoc:include type="modules" name="topmenu" style="xhtml" />
</div>

با تشکر فراوان.

اره کافی استفاده کن

جواب اینکه مورد استفاده قرار گرفت رو به ما هم بگو!!!

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

Share this post

Link to post
Share on other sites

ارسال شده در

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

لطفا رانمایی بفرمائید.

مشکلش چیه بگو تا بهت بگم چه کار کنی؟؟؟

Share this post

Link to post
Share on other sites

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

سلام.

داخل کروم زیرمنو بصورت کامل باز نمیشه.

ولی فایر فاکس ایرادی نداره.

ویرایش شده در توسط siamakb

Share this post

Link to post
Share on other sites

ارسال شده در

سلام.

داخل کروم زیرمنو بصورت کامل باز نمیشه.

ولی فایر فاکس ایرادی نداره.

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

در حال پیگیری هستم ببینم مشکل چیه

Share this post

Link to post
Share on other sites

ارسال شده در

سلام.

داخل کروم زیرمنو بصورت کامل باز نمیشه.

ولی فایر فاکس ایرادی نداره.

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

#topmenu1 { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#topmenu1 li { float:right; position: relative; padding: 0; line-height: 8px;margin-top:3px; }
#topmenu1 li:hover { background-position: 0 -40px; }
#topmenu1 li a { display: block; padding: 0 10px; color:#FFFFFF; text-decoration: none; }
#topmenu1 li a:hover { color:#FFFF00; }
#topmenu1 li ul { opacity: 0; position: absolute; left: 50; width: 12em; background:#1C4D81; list-style-type: none; padding: 0; margin-top:8px;box-shadow: 0px 1px 25px #1C4D81 ; }
#topmenu1 li:hover ul { opacity: 1; }
#topmenu1 li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#topmenu1 li:hover ul li { height: 30px; line-height: 30px; }
#topmenu1 li ul li a { background: #1C4D81;}
#topmenu1 li ul li a:hover { background:#163C64; }
#topmenu1 li { -webkit-transition: all 0.2s; }
#topmenu1 li a { -webkit-transition: all 0.5s; }
#topmenu1 li ul { -webkit-transition: all 1s; }
#topmenu1 li ul li { -webkit-transition: height 0.5s; }

Share this post

Link to post
Share on other sites

ارسال شده در

ممنونم از اینکه وقت می گذارید و جواب میدین.

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

به عبارت دیگه وقتی میخوام از منو اصلی برم رو زیر منو , زیر منو چند لحضه مخفی میشه.

Share this post

Link to post
Share on other sites

ارسال شده در

ممنونم از اینکه وقت می گذارید و جواب میدین.

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

به عبارت دیگه وقتی میخوام از منو اصلی برم رو زیر منو , زیر منو چند لحضه مخفی میشه.

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

ul زیر منو رو ببر بالاتر کمی ببین درست نمیشه؟؟؟

Share this post

Link to post
Share on other sites

ارسال شده در

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

ul زیر منو رو ببر بالاتر کمی ببین درست نمیشه؟؟؟

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

این کد مشخص نمیکنه داخل کدوم منو هستم؟ مثلا داخل منو خرید یا صفحه نخست........

ممنون.

Share this post

Link to post
Share on other sites

ارسال شده در

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

این کد مشخص نمیکنه داخل کدوم منو هستم؟ مثلا داخل منو خرید یا صفحه نخست........

ممنون.

متوجه منظورتون نمیشم؟؟؟

Share this post

Link to post
Share on other sites

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

متوجه منظورتون نمیشم؟؟؟

مثلا داخل صفحه home هستم.می خوام رنگ این منو های لایت بشه که مشخص بشه کدوم بخش هستم.

ویرایش شده در توسط siamakb

Share this post

Link to post
Share on other sites

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

مثلا داخل صفحه home هستم.می خوام رنگ این منو های لایت بشه که مشخص بشه کدوم بخش هستم.

#navigation li.current > a {
color: #FBCB60;
}

این رنگ متن رو عوض می کنه

وبه نظرم اینم رنگ li رو 

#navigation li.current  {
color: #FBCB60;
}

ویرایش شده در توسط redevills

Share this post

Link to post
Share on other sites

ارسال شده در

ممنون از لطفتون.مشکل حل شد.

اگه زحمتی نیست بفرمائید چطوری می تونم این کد ها رو پیدا کنم مثل کد ( li.current ).

باتشکر.

Share this post

Link to post
Share on other sites

ارسال شده در

ممنون از لطفتون.مشکل حل شد.

اگه زحمتی نیست بفرمائید چطوری می تونم این کد ها رو پیدا کنم مثل کد ( li.current ).

باتشکر.

خواهش می کنم قابلی نداشت...

منظورت از پیدا کردن کد چیه؟؟؟

Share this post

Link to post
Share on other sites

ارسال شده در

این کد رو از کجا اوردین li.current ؟

تجربی بدست اوردین؟

web developer هم نصب کردن متاسفانه پیدا نکردم.

Share this post

Link to post
Share on other sites

ارسال شده در

این کد رو از کجا اوردین li.current ؟

تجربی بدست اوردین؟

web developer هم نصب کردن متاسفانه پیدا نکردم.

اگه از کروم استفاده می کنی : مثلا می خوای منوی این سایت رو در بیاری (یاد بگیری) در کروم روی صفحه inspect element کلیک کن بعد زیر ص دستورات html می افته

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

برای اینکه یاد بگیری خوبه این روش

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

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

Share this post

Link to post
Share on other sites

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

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

اینم تصویرش

[ATTACH=CONFIG]5495[/ATTACH]

در اینجا قسمت پروتز دو زیرمنو یه نام های پروتز ثابت و متحرک داره.

ویرایش شده در توسط dayfemale

Share this post

Link to post
Share on other sites

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

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

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

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


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

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

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


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک رفع مشکلات و سوالات عمومی جوملا 1.7 و 2.5