yaser4365

مشکل در طراحی منو سی اس اس

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

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

سلام و عرض ادب خدمت مهندسان و دوستان گرامی

بنده تازه عضو سایت شدم - یه مشکلی تو طراحی منو دارم که امیدوارم تو این انجمن بتونم حلش کنم - اینم بگم تو خیلی از سایتها و انجمن ها مطرح کردم ولی کسی نتونست بهم کمک کنه

اما مشکل من

بنده یه منو افقی دارم که دارای تعدادی ایتم منو هستش میخوام بالای سر ایتم منوهام یه عکس مثل فلش باشه که با حرکت موس روی ایتمها این عکس هم حرکت کنه - همه کدها رو نوشتم اما اینکه چجوری میشه کدی نوشت که برای هر ایتم منو ، فلش به مقدار معین جابجا بشه تا روی ایتم مورد نطر قرار بگیره رو بلد نیستم-- فقط لطفا اگه امکانش هست کد سی اس اس مربوط به حرکت فلش رو بهم بگین-- عکس منو هم براتون پیوست کردم -- تشکر

ویرایش شده در توسط yaser4365
0

به اشتراک گذاری این پست


لینک به پست

عکس رو کجا پیوست کردید ؟

نمی دونم درست متوجه شدم یا نه ولی اگر چنین چیزی می خواهید باید جی کوئری و css را با هم بکار ببرید.

http://jsfiddle.net/fakhar/329wmcyw/1/

4

به اشتراک گذاری این پست


لینک به پست

تشکر از راهنمایی شما -- بله کاملا درست متوجه شدین فقط من با جی کوئری اصلا کار نکردم اگه میشه دستور و کد حرکت فلش رو بصورت سی اس اس بهم بگین -- منویی که من سورسش رو دارم با سی اس اس نوشته کدش رو براتون میزارم نمیدونم این دستور #nav li:nth-child(1):hover رو چجوری باید برای هر ایتم منوی خودم بنویسم تا کار کنه -- دستورات مربوط به تعیین موقعیت عکس فلش و هاور شدن برای حرکت اون اینجوریه


#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
right: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}**/
#nav li:nth-child(1):hover ~ #lavalamp {
right: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
right: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
right: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
right: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
right: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
right: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
right: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
right: 565px;
}

0

به اشتراک گذاری این پست


لینک به پست

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

با css به تنهایی نمیشه انجامش داد

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


-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;

را یا ms کنید و یا بر روی سه دهم بگذارید اینجوری یعنی 3000 ثانیه که می شه نزدیک یک ساعت

1

به اشتراک گذاری این پست


لینک به پست

ببخشید من با جوملا کار میکنم که شامل دو دسته فایل ایندکس برای اچ تی ام ال و سی اس اس هست کدهای جی کوئری باید تو قسمت کدهای html باشه یا css?

0

به اشتراک گذاری این پست


لینک به پست

توی کدهای html و داخل تگ script یعنی


<script>
$(document).ready(function() {
$("#upLine").each(function() {
var w = $(this).parent("ul").find("li:first-child").width();
var w = w+"px";
var p = $(this).parent("ul").find("li:first-child").position();
var r = p.right;
var r = r+"px";
var l = p.left;
var l = l+"px";
$("#upLine").css({
'width' : w,
'right' : r,
'left' : l,
});
});
$(".menu li a").hover(function() {
var w = $(this).parent("li").width();
var w = w+"px";
var p = $(this).parent("li").position();
var r = p.right;
var r = r+"px";
var l = p.left;
var l = l+"px";
$("#upLine").animate({
'width' : w,
'right' : r,
'left' : l,
},500);

});
});
</script>

البته ممکنه جولا کتابخانه jquery رو پشتیبانی نکنه که در این صورت باید قبل از کدهای بالا

<script src="http://code.jquery.c...1.js"></script>

رو هم قرار بدید

1

به اشتراک گذاری این پست


لینک به پست

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

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

ببخشید این قبل از کدهای بالا یعنی چی؟؟؟

میگم نباید مثلا یه عددی جلوی px قرار بدیم که مثلا این اندازه جابجابشه ؟؟؟

ویرایش شده در توسط yaser4365
0

به اشتراک گذاری این پست


لینک به پست

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


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

1

به اشتراک گذاری این پست


لینک به پست

با سپاس از زحمات شما متاسفانه کار نمیکنه

یه سوال - من منوهام رو با روش شما نساختم - حتما باید تمام کدها - عینا مثل کدهای شما باشه یا مهم همون کدهای جاوا هستش؟؟؟

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

0

به اشتراک گذاری این پست


لینک به پست

نمونه ای که گذاشتم با کدهای من داره کار می کنه

پس اگر کدها را همونطور بگذارید کار می کنه

کدهاتون باید ساختار کدهای من رو داشته باشه یعنی در li آخر رنگ یا آیکون رو قرار بدید و در استایل دهی خاصیتهایی رو که من به منو دادم رو بگذارید

اگر از ادیتور خود جوملا استفاده می کنید احتمالا تگ script را مجاز نکنه یا باید فایلها را در notepad ویرایش کنید یا از پشتیبانی جوملا روش قرار دادن اسکریپت رو توی سی ام اسشون سئوال کنید

2

به اشتراک گذاری این پست


لینک به پست

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


#menu {
min-height: 30px;
width:990px;
background-color: #003399;
background-image: -moz-linear-gradient(top, #003399 #0033FF);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#003399), to(#0033FF));
background-image: -webkit-linear-gradient(top, #003399, #0033FF);
background-image: -o-linear-gradient(top, #003399, #0033FF);
background-image: linear-gradient(to bottom, #003399, #0033FF);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F90', endColorstr='#FC0', GradientType=0);
border: none;
border-style: outset;
border-color:#fff;
margin-top:3px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-bottom-right-radius:10px;
-moz-border-bottom-left-radius: 10px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
*zoom: 1;

}
#menu ul {
margin:0;
padding:0;

}
#menu ul li {
list-style:none;
display:inline-block;
position:relative;
padding:0;
margin:0;
height:35px;

font-family:'bhoma';

}
#menu ul li a {
display:block;
padding:0px 15px ;
margin:0;
line-height:35px;
text-decoration:none;
font-size:18px;
transition:ease-in .4s;
-moz-transition:ease-in .4s;

}
#menu .menu li a {
color:#fff;
text-decoration: none;
text-shadow: 0 2px 2px #000;
border-left:1px solid #FFF;
border-color:#fff;
}
#menu .menu .active a,#menu .nav .active a:hover {
color: #9F6;
text-decoration: none;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
#menu ul li a span.menutitle {
display:block;

}
#menu ul li a span.menudesc {
float:right;
clear:both;
font-size:15px;
line-height:12px;
margin:-20px 0 0 0;
font-family:'bhoma';

}
/* submenu */
#menu ul li ul {
position:absolute;
width:120px;
right:-999em;
margin:0;
padding:1px;
background-color: #C90;
border: 2px solid #fff;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px #000;
-moz-box-shadow: 0 5px 10px #000;
box-shadow: 0 5px 10px #000;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;

}
#menu ul li a:hover{
text-decoration:overline;
text-shadow:0px 1px 1px #000;
right:10px;

}
#menu ul li:hover ul, #menu ul li.sfHover ul {
right:0;

}
#menu ul li ul li:hover ul {
right:170px;
top:0;

}
#menu ul li ul li {
padding:0;
height:auto;
width:120px;
margin:0 0 5px 0;
border-right:none;
}
#menu ul li:hover ul li a {
text-shadow:none;
margin:0;
padding:1px 5px 1px 0px;
line-height:25px;
font-size:14px;
text-align:right;

}
#menu ul li:hover ul li {
background:none;
}
#menu ul li:hover ul li a,
#menu ul li ul li a,
#menu ul li li ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a,
#menu ul li.active ul li a,
#menu ul li ul li.active ul li a {
color:#000;
background:none;
border:2px solid #fff;
border-radius:7px;

}
#menu ul li ul li a:hover,#menu ul li ul li.active a,#menu ul li.active ul li a:hover,#menu ul li li ul li a:hover,#menu ul li ul li.active ul li.active a,#menu ul li ul li.active a,#menu ul li.active ul li a:hover {
color: #000000;
text-decoration: none;
background-color: #7898d8;
background-image: -moz-linear-gradient(top, #7898d8, #4d7dde);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7898d8), to(#4d7dde));
background-image: -webkit-linear-gradient(top, #7898d8, #4d7dde);
background-image: -o-linear-gradient(top, #7898d8, #4d7dde);
background-image: linear-gradient(to bottom, #7898d8, #4d7dde);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff70e3e8', endColorstr='#ff28ccca', GradientType=0);
border-color: #28ccca #28ccca #5da8c7;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style:solid; border-width:1px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#menu ul li ul ul, #menu ul li:hover ul ul,#menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul {
right:-999em;
padding:5px;
margin:-5px 0 0 0;

}

0

به اشتراک گذاری این پست


لینک به پست

یعنی منو رو بر اساس css بنویسیم؟

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

2

به اشتراک گذاری این پست


لینک به پست

ممنون از حضورتون کاملا شما درست میفرمایید ولی من یه خورده مبتدی ام اموزش چیزی هست که ساخت منو رو اونجوری که قاعده و قانونش هست رو بهم یاد بده؟؟؟؟ ممنون میشم راهنماییم کنین اگه مرجع خوبی سراغ دارین

خدا بهتون خیر بده

0

به اشتراک گذاری این پست


لینک به پست

شما باید مشکلتون رو توی انجمن پشتیبانی جوملا مطرح کنید

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

2

به اشتراک گذاری این پست


لینک به پست

سلام دوستان گرامی

بابت راهنماییاتون واقعا ممنون

من اونچه به نظرم رسید اینه که کدش رو اینجوری با سی اس اس بنویسم ولی کار نمیکنه میشه بگین این کد درسته یا نه؟

#nav > ul li a:hover #yas{

animation: mani 1s linear;

-moz-animation: mani 1s linear;

}

@keyframes mani{

from{padding-right:320px;}

to{padding-right:350px;}

}

@-moz-keyframes mani{

from{padding-right:320px;}

to{padding-right:350px;}

}

0

به اشتراک گذاری این پست


لینک به پست

این کد که اشتباهه و ربطی به کار شما پیدا نمی کنه

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

کدهای css را حذف کنید

منو رو به همون صورت که کار نمی کنه قرار بدید و

لینک آنلاین از سایتتون بگذارید

1

به اشتراک گذاری این پست


لینک به پست

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

بازم ممنون و شرمنده از اینکه وقتتون رو میگیرم

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="gooeymenu.js">

/***********************************************

* Gooey Menu Script © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for this script and 100s more.

***********************************************/

</script>

<script>

/* jQuery Gooey Menu

* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage

* Author: Dynamic Drive at http://www.dynamicdrive.com/

* Visit http://www.dynamicdrive.com/ for full source code

*/

jQuery.noConflict()

jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

}

})

var gooeymenu={

effectmarkup: '<li class="active"></li>',

setup:function(usersetting){

jQuery(function($){ //on document.ready

function snapback(dur){

if ($selectedlink.length>0)

$effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)

}

var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)

var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL

var $menulinks=$menu.find('li a')

var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL

$effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window

if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined

var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')

}

else{

var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined

}

setting.defaultselectedBool=$selectedlink.length

$menulinks.mouseover(function(){

clearTimeout(setting.snapbacktimer)

var $target=$(this)

//alert($target.position().left+" "+$target.get(0).offsetLeft)

$effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)

if (setting.defaultselectedBool==0) //if there is no default selected menu item

$selectedlink=$target //set current mouseover element to selected element

})

if ($selectedlink.length>0){

snapback(0)

$menu.mouseleave(function(){

setting.snapbacktimer=setTimeout(function(){

snapback(setting.fxtime)

}, setting.snapdelay)

})

}

$(window).bind('resize', function(){

snapback(setting.fxtime)

})

})

}

}

</script>

<link rel="stylesheet" type="text/css" href="gooeymenu.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<ul id="gooeymenu1" class="gelbuttonmenu">

<li><a href="#">خانه</a></li>

<li> <a href="#">درباره ما</a>

<ul class="sub-menu">

<li><a href="#">گالری</a></li>

<li><a href="#">ارتباط با ما</a></li>

<li><a href="#">تماس با ما</a>

<ul class="sub-menu">

<li><a href="#">برنامه ها</a></li>

<li> <a href="#">پایگاه داده</a>

<ul class="sub-menu">

<li><a href="#">جلسات </a></li>

<li><a href="#">مباحث</a></li>

<li><a href="#">دروس</a></li>

</ul>

</li>

<li><a href="#">شبکه بندی</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">سایتهای مرتبط</a></li>

<li><a href="#">معرفی محصولات</a></li>

<li><a href="#">تماس ها</a></li>

</ul>

<script>

gooeymenu.setup({id:'gooeymenu1', selectitem:0})

</script>

<style>

/* ######### Gel Menu CSS ######### */

.gelbuttonmenu{

height:35px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

border-style: outset;

border-color:#fff;

width:auto;

font-size:18px;

font-family:'bhoma';

margin-top:-5px;

}

ul.gelbuttonmenu{

list-style:none;

padding: 0;

margin: 0;

margin-bottom:1em;

text-align: center; //set value to "left", "center", or "right"*/

}

ul.gelbuttonmenu li{

float:right;

display: inline;

}

ul.gelbuttonmenu li a{

display: inline-block;

color: black;

font-weight:bold;

padding: 0px 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/

line-height: 35px; /*spacing between each menu link*/

text-decoration: none;

}

ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/

position:absolute;

border:2px solid blue;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius:4px;

-moz-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);

-webkit-box-shadow: 2px 2px 4px rgba(120,120,120,0.7);

box-shadow: 2px 2px 4px rgba(120,120,120,0.7);

background:#d7ed93;

background: -moz-linear-gradient(top, #d7ed93, #fff);

background: -webkit-gradient(linear, center top, center bottom, from(#d7ed93), to(#fff));

background: linear-gradient(top, #d7ed93, #fff);

}

.gelbuttonmenu .sub-menu{

display: none;

position:absolute;

}

.gelbuttonmenu .sub-menu > li:hover{

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-o-transition: all 0.3s ease 0s;

-ms-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

}

.gelbuttonmenu .sub-menu > li > a{

border:1px groove;

border-radius:10px;

width: 100px;

display: block;

background-color:#4422E3;

padding:5px 10px;

color: white;

font-size:14px;

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-o-transition: all 0.3s ease 0s;

-ms-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

}

.gelbuttonmenu .sub-menu > li:hover > a{

color:#000;

text-decoration:underline;

}

.gelbuttonmenu li:hover > .sub-menu{

display: block;

position:absolute;

}

.gelbuttonmenu .sub-menu > li > .sub-menu{

right:100px;

top: 0;

margin-right:20px;

}

}</style>

</body>

</html>

0

به اشتراک گذاری این پست


لینک به پست
لینک آنلاین از سایتتون بگذارید
0

به اشتراک گذاری این پست


لینک به پست

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

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

ببخشید دارم درس پس میدم

0

به اشتراک گذاری این پست


لینک به پست

منوی dynamicdrive به خودی خود که مشکلی نداره تا من چکش کنم شما باید مشکل را روی سایتتون بررسی و حل کنید

هر وقت آنلاین شد نشانی را بگذارید

0

به اشتراک گذاری این پست


لینک به پست

بله کاملا درسته منو مشکلی نداره ولی مشکل من ساب منوها هستش که وقتی روی ایتم منو میاد موس ساب منوها موقعیتشون بهم میخوره احتمالا برای positin هست ولی من هرچی سعی کردم مشکلم حل نشد و ساب منوها موقعیت درستی نمیگیرند و توسایت پخش میشن مثلا یه نمونه اش اینه که بجای اینکه زیر هم قرار بگیرن بصورت خطی قرار میگیرن البته من display هم درست گذاشتم ولی بازم درست نشد

0

به اشتراک گذاری این پست


لینک به پست

سلام

ممنون مشم ازتون همون کدی که شما برام گذاشتی رو جوری تغییرش بدین که زیر منو داشته باشه البته زیر منو خودش هم باز زیر منو داشته باشه

0

به اشتراک گذاری این پست


لینک به پست

سلام

اگه منظورتون منم که کدی نذاشتم براتون تا تغیرش بدم

0

به اشتراک گذاری این پست


لینک به پست

اتفاقا چرا شما کد گذاشتین برام صفحه اول برین میتونین بینین البته فکر کنم یه لینک دادین که کدهاش توش بود

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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


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

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

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


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