rtl کردن موقعیت منوها

[امیر12 2]

سلام

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

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

فایل مورد نظر

http://www.jmdownload.ir/download.php?filename=13702000781.zip

عکس از منوها

[محمدحسین میری 3,094]

درود

 

در مور سوال اول دمو قرار بدید

در مورد سوال دوم شما یم منو می سازید بعد از طریق ماژول ها این ماژول رو انتخاب می کنید و منوی مورد نظر رو که قبلن ساختید بر می گزنید و در موقعیت قالب تان منتشر می کنید

 

موفق باشید

[امیر12 2]

با سلام من فایل css و index.html ضمیمه کردم و هنوز روی قالب ازش استفاده نکردم اگر فایل ضمیمه دانلود کنید روی فایل index.html کلید کنید منو باز میشه

[امیر12 2]

دوستان راهنمایی می کنند چه گونه می شه موقعیت منوها را به راست تغییر داد

[sonic69 279]

درود بر شما

 

دریافت فایل شما و آزمایش کردن اون توسط هر شخصی کمی زمانبر هست و اکثرا از این کار صرفه نظر میکنند.

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

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

 

پایدار باشید

[امیر12 2]

سلام من دوتا مشکل دارم برای اینکه این منو بیارم تو قالب و شما در
نهایت بگین این طوری راست چینش کن یک تو فایل index.php برای موقعیت menu
چی بنویسم و
دو تو فایل template.css چه ویژگی بهش بدم حالا من اول باید این دو.تا
مشکلو برطرف کنم بعد چه جوری این فایلو تو منو فراخوانی کنم و از این منو
تو قالب استفاه کنم و در نهایت شما بیایین تو قالب بگین این طوری راست بشه
من برای همین تاپیک زدم

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

[محمدحسین میری 3,094]

درود

 

سوال هاتون فقط باید css و html رو استفاده کرد

اگر بخواهید از طرح این منو استفاده کنید

باید یک موقعیت در قالب جوملا ایجاد کنید و یک منو از جوملا در آن موقعیت منتشر کنید

بعد css های منو رو بهش اضافه کنید

باید به html و css و طراحی قالب جوملا تسلط داشته باشید

[امیر12 2]

فرض کنید من امدم تو فایل index.php قالب یک چنین موقعیتی برای منوهام ایجاد کردم

<?php if($this->countModules('menu')): ?>
        <div id="menu1"><div id="menu2"><div id="menu">
            <jdoc:include type="modules" name="menu" style="none" />  
        </div></div></div>
        <?php endif; ?>

ایا درست ایجاد کردم و بعداش یک منو ایجاد شد حالا فایل css که ضمیمه کردم بیام تو فایل templat.css قالب اضافه اش کنم و در نهایت یک ماژول html دستی درست کنم و فایل index.html را که تو فایل ضمیمه بود محتویاتش را انجا اضافه کنم

منظورتان ایا همین هست

[محمدحسین میری 3,094]

درود

 

خیر دیگر نیازی به ماژول اچ تی ام ال دستی نیست

موقعیت ایجاد شد شما یک منو می سازید بعد یک ماژول ساخته از نوع منو و در موقعیت منتشر می کنید

حال منو ایجاد شده فقط باید css  ها رو اعمال کنید

[امیر12 2]

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

 

یکی به من گفت شما فایل index.html تو فایل index.php محتویاتشو کپی کن نمی
دانم درسته یا غلطه و بعد حالا چه طوری با منوهای جوملا سازگارش کنم مثلا
وقتی زدم روی home وصل بشه به منوی home جوملا

[محمدحسین میری 3,094]

درود

 

دوست من اگر بخوایم توضیح بدیم باید آموزش طراحی قالب رو یاد بدیم

شما توی این لینک آموزش طراحی قالب را پیدا و بخونید : http://forum.joomina.ir/forum/93-%D9%85%D8%AA%D9%88%D8%B3%D8%B7/

[امیر12 2]

اموزش طراحی قالب که جناب امره ای گذاشتن من خوندم من مشکلم این نیست فایل index.html تو فایل index.php بیارم من مشکلم اینه که چه طوری این منو را سازگار با جوملا کنم این یک کم حرفهای می شه برای همین هم از شما و بقیه دوستان کمک خواستم

[محمدحسین میری 3,094]

درود

 

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

با جوملا منو ساخته و با ماژول در موقعیت مورد نظر نمایش میدید

حال css های این منو رو روی همون منو ای که با جوملا ساختید پیاده می کنید

[امیر12 2]

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

[محمدحسین میری 3,094]

درود

 

بله میشه اینم یک نوع از نمایش زیر مجموعه می باشد می باشد

منویی که می بینید بیشتر css هست فقط ul و li و تگ a از html است نه چیز دیگه

تا وقتی که به طراحی قالب جوملا مسلط نباشید هر جوابی که ما بدیم برای شما گنگ هست

من تو چند تا پست جواب تون رو دادم!

[مصطفی صفرعلی 2,891]

با سلام

 

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

 

وارد فایل index.php قالبتون شوید و تگ jdoc مربوط به موقعیت منوتون رو حذف کنید و اون کدها رو جایگزین کنید

 

دوباره از فایل html از داخل تگ head تگهای link و script را بردارید و درست قبل از بسته شدن تگ head قالبتون کپی کنید

 

فراموش نکنید که تگ link رو باید مجددا مطابق مسیر پوشه مربوطه آدرس دهی کنید

 

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

 

برای rtl کردن باید به css تسلط داشته باشید

 

موفق و پیروز باشید

یا حق

[امیر12 2]

با تشکر از شما جناب صفر علی همین طور که جناب میری فرمودن فایل index.html بیشتر تشکیل شده از فقط ul و li و تگ a از html است ومن چون می خواهم این منو را با منوی جوملا سازگار کنم فکر نکنم فایل index.html که تو فایل ضمیمه هست زیاد برای من فایده داشته باشه در واقع این کار نیاز به حمایت یک فر حرفهای داره کسی مثل شما تا بشه این تو جوملا استفده کرد برای همین هم ازتون کمک و راهنماای می خواهم تا بتوانم این منو را ر جوملا استفاده کنم

[محمدحسین میری 3,094]

درود

 

ببینید جناب صفرعلی توضیح کامل رو دادند

یعنی توضیح ای که به کمترین دانش کد نویسی نیاز داره

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

اگر با html و css توانایی ایجاد منو را داشته باشید فقط کافیه یک موقعیت ایجاد کنید و منو ای بسازید و با ماژولی از نوع " ایجاد منو " منوی مورد نظر رو نشان بدید و css های این منوی html را روی جوملا تان پیاد کنید

متوجه شدید؟

[امیر12 2]

مرسی جناب میری من الان امدم تو قالبم تو فایل index.php یک چنین موقعیتی ایجاد کردم

<?php if($this->countModules('menu')): ?>
        <div id="menu1"><div id="menu2"><div id="menu">
            <jdoc:include type="modules" name="menu" style="none" />  
        </div></div></div>
        <?php endif; ?>

این موقعیت درست ایجاد کردم تو فایل index.php ?

بعداش امدم در انتهای فایل template.cssاینو نوشتم

#menu_container{
	margin-top:150px; /* separates 150px from top */
	height:90px; /* height, main links have a height of 45px and dropdown links have a height of 45px, 45px+45px=90px */
	border-bottom:solid 1px #CCC;
	-webkit-box-shadow:0 0 6px #BBBBBB;
	-moz-box-shadow:0 0 6px #BBBBBB;
	box-shadow:0 0 6px #BBBBBB;
	/* background color */
	background:#F5F5F5;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EEE));
	background:-webkit-linear-gradient(top, #F5F5F5, #EEE);
	background:-moz-linear-gradient(top, #F5F5F5, #EEE);
	background:-ms-linear-gradient(top, #F5F5F5, #EEE);
	background:-o-linear-gradient(top, #F5F5F5, #EEE);
	}
/* ========== BIG BLACK LINE ========== */
#menu{
	width:100%; /* full width */
	height:45px; /* height, all elements will inherit this height */
	/* background color */
	background:#444;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#333));
	background:-webkit-linear-gradient(top, #444, #333);
	background:-moz-linear-gradient(top, #444, #333);
	background:-ms-linear-gradient(top, #444, #333);
	background:-o-linear-gradient(top, #444, #333);
	}
/* ========== DIV THAT HOLDS THE MAIN LINKS IN THE CENTER ========== */
#menu_center{
	width:1020px; /* width */
	height:100%; /* full height */
	margin:0 auto; /* go to the middle of the screen */
	}
/* ========== MAIN LINKS ========== */	
#menu ul{
	width:auto; /* width auto */
	height:100%; /* full height */
	position:relative;
	margin:0; /* removes the space added by default */
	padding:0; /* removes the space added by default */
	float:left;
	list-style:none;
	}
#menu ul li{
	height:100%; /* full height */
	float:left; /* go left */
	}
#menu ul li a{
	display:block;
	height:100%; /* full height */
	padding:0 15px; /* separates from inside, 15px from left and right side */
	font-family:"BebasNeue"; /* call font */
	font-size:24px; /* font size */
	color:#FFF; /* text color */
	text-decoration:none;
	line-height:50px;
	}
#menu ul li, .menu ul li a{
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-ms-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;
	}
/* ========== MAIN LINKS ON MOUSEOVER AND WHEN THE MAIN LINK HAS CLASS '.selected' ========== */				
#menu ul li:hover, .menu ul li.selected{
	background:#F5F5F5;
	}
#menu ul li:hover > a, .menu ul li.selected > a{
	color:#777;
	}
/* ========== WHEN THE MAIN LINK HAS CLASS '.selected' ========== */	
#menu ul:hover li.selected{
	/* background color */
	background:#444;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#333));
	background:-webkit-linear-gradient(top, #444, #333);
	background:-moz-linear-gradient(top, #444, #333);
	background:-ms-linear-gradient(top, #444, #333);
	background:-o-linear-gradient(top, #444, #333);
	}
#menu ul:hover li.selected > a{
	color:#FFF; /* text color */
	}
#menu ul li:hover.selected{
	background:#F5F5F5; /* background color */
	}
#menu ul li:hover.selected > a{
	color:#777; /* text color */
	}			
/* ========== HORIZONTAL DROPDOWN MENU ========= */
#menu ul ul{
	width:1020px; /* width */
	position:absolute;
	left:0;
	/* background color, for proper operation on old browsers, the background color of dropdown menu must be defined */
	background:#F5F5F5;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EEE));
	background:-webkit-linear-gradient(top, #F5F5F5, #EEE);
	background:-moz-linear-gradient(top, #F5F5F5, #EEE);
	background:-ms-linear-gradient(top, #F5F5F5, #EEE);
	background:-o-linear-gradient(top, #F5F5F5, #EEE);
	filter:alpha(opacity=0);
	opacity:0;
	-webkit-transition:all 0.3s ease-in;
	-moz-transition:all 0.3s ease-in;
	-ms-transition:all 0.3s ease-in;
	-o-transition:all 0.3s ease-in;
	transition:all 0.3s ease-in;
	}
#menu ul ul.visible{
	z-index:1;
	filter:alpha(opacity=100);
	opacity:1;
	}
#menu ul:hover ul.visible{
	filter:alpha(opacity=0);
	opacity:0;
	}
#menu ul li:hover ul.visible{
	filter:alpha(opacity=100);
	opacity:1;
	}
#menu ul li:hover ul{
	z-index:2;
	filter:alpha(opacity=100);
	opacity:1;
	}
/* ========== LINKS IN DROPDOWN MENU ========== */	
#menu ul ul li{
	border:none;
	}
#menu ul ul li a{
	padding:0 11px; /* separates from inside, 11px from left and right side */
	font-family:Arial,Helvetica,sans-serif; /* call font */
	font-style:italic; /* font style */
	font-size:16px; /* font size */
	color:#888; /* text color */
	}
/* ========== LINKS IN DROPDOWN MENU ON MOUSEOVER ========== */
#menu ul ul li:hover{
	border:none;
	background:none;
	}
#menu ul ul li:hover a{
	color:#333;
	text-shadow:0 0 6px #CCC;
	}
/* ========== WHEN LINK IN DROPDOWN MENU HAS CLASS '.selected' ========== */	
#menu ul ul li a.selected{
	color:#333; /* text color */
	text-shadow:0 0 6px #CCC;	
	}
#menu ul ul:hover li a.selected{
	color:#888; /* text color */
	text-shadow:none;
	}
#menu ul ul li:hover a.selected{
	color:#333; /* text color */
	text-shadow:0 0 6px #CCC;
	}

حالا مشکلاتی که دارم ساخت منوی جدید نمی شه منو را تنظیم کرد که به صورت vertical & horizontal تنظیم کرد و به صورت پیش فرض به صورت vertical نمایش داده میشه

در نهایت من چه طوری زیر منو ها را نمایش بدم مثل منوی اصلی

[مصطفی صفرعلی 2,891]

با سلام

 

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

 

احتمالا css رو هم به درستی تعریف نکردید

 

یکبار دیگر به توضیحات پست 16 دقت کنید

 

تگهای لینک و اسکریپت

 

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

 

موفق و پیروز باشید

یا حق

[امیر12 2]

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

http://networkarticles.ir/

[مصطفی صفرعلی 2,891]

با سلام

 

فرقی نمیکنه که بخواهید این منو یا کد موقعیت رو تعریف کنید

 

در هر صورت باید در فایل index.php با انجام آزمون و خطا دایو کدهای منوتون رو قرار بدید

 

با توجه به ظاهر قالبتون داخل تگ بادی همون اوایلش دایو منوتون رو جابجا کنید متوجه خواهید شد

 

موفق و پیروز باشید

یا حق

[امیر12 2]

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

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

دمو

http://networkarticles.ir/

 

 

 

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

direction:rtl;
    overflow: visible;
    color: #000;
    position: relative;
    z-index: 999;

[امیر12 2]

با سلام

من امدم تو فایل php این طوری موقعیت ایجاد کردم

 <?php if($this->countModules('menu')): ?>
        <div id="menu1"><div id="menu2"><div id="menu">
            <jdoc:include type="modules" name="menu" style="none" />  
        </div></div></div> <?php endif; ?>

بعداش هم هم فایل css کپی کردم تو فایل template.css و راست چینش کردم

الان یک مشکلی که دارم اینه تو منو که من ازش کپی برداری کرم زیر منوهاش وقتی موس روش نمایش داد ه می شه و لی الان زیر منوهای من زمانی نمایش داده میشه که روی منو ی اصلی کلید کنی تا زیر منوهاش نمایش داده  حالا برای اینکار چه کار باید کرد

مثلا الان فرض کنید مطلب 3 زیر منو  داره ولی در حالت عادی وقتی موس می ره روش نمایش داده نمیشه  حتما باید روش کلید کنی تا زیرمنوهاش نمایش داده بشه 

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

http://uploadtak.com/images/b42_menu.rar

[امیر12 2]

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