رفتن به مطلب

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


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

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

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

اما مشکل من

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

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

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

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

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

لینک به ارسال

تشکر از راهنمایی شما -- بله کاملا درست متوجه شدین فقط من با جی کوئری اصلا کار نکردم اگه میشه دستور و کد حرکت فلش رو بصورت سی اس اس بهم بگین -- منویی که من سورسش رو دارم با سی اس اس نوشته کدش رو براتون میزارم نمیدونم این دستور #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;
}

لینک به ارسال

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

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

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


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

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

لینک به ارسال

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

لینک به ارسال

توی کدهای 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>

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

لینک به ارسال

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

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

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

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

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


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

لینک به ارسال

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

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

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

لینک به ارسال

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

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

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

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

لینک به ارسال

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


#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;

}

لینک به ارسال

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

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

لینک به ارسال

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

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

لینک به ارسال

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

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

لینک به ارسال
  • 3 هفته بعد...

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

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

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

#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;}

}

لینک به ارسال

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

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

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

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

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

لینک به ارسال

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

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

<!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>

لینک به ارسال

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

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

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

لینک به ارسال

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

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

لینک به ارسال

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

لینک به ارسال
  • 3 هفته بعد...

سلام

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

لینک به ارسال

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

لینک به ارسال

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

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

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

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

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

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

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

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

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