استفاده از کدهای سابت codepen

[yasiphp]

سلام دوستان.مشکلی داشتم ممنون میشم اگر راهنمایی کنید
در حال طراحی سایت هستم و میخوام ناوبار شناور به صورت مات و بلور برای هدر سایت بسازم.مانند منوهای گوشی اپل.در اینترنت جستجو کردم و تونستم چیزی که میخواستمو پیدا کنم.
لطفا به لینک زیر برید
http://codepen.io/rthor/pen/xbfnG
چیزی که میخواستمو در سایت codepen پیدا کردم . کد html رو که تو body گذاشتم و css و js رو همونطور که تو codepen گذاشته شده کپی کردم و در html فراخوانی کردم.
به این صورت
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/java.js"></script>
ناوبار ساخته میشه اما بلور نیست و گویا جی کوئری به درستی کار نمیکنه.
لطفا بگید مشکل از کجاست ؟

[Omid Jackson]

سلام دوستان.مشکلی داشتم ممنون میشم اگر راهنمایی کنید
در حال طراحی سایت هستم و میخوام ناوبار شناور به صورت مات و بلور برای هدر سایت بسازم.مانند منوهای گوشی اپل.در اینترنت جستجو کردم و تونستم چیزی که میخواستمو پیدا کنم.
لطفا به لینک زیر برید
http://codepen.io/rthor/pen/xbfnG
چیزی که میخواستمو در سایت codepen پیدا کردم . کد html رو که تو body گذاشتم و css و js رو همونطور که تو codepen گذاشته شده کپی کردم و در html فراخوانی کردم.
به این صورت
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/java.js"></script>
ناوبار ساخته میشه اما بلور نیست و گویا جی کوئری به درستی کار نمیکنه.
لطفا بگید مشکل از کجاست ؟

بلور منظورتون شفافیتش هست؟ (opacity || alpha)
اگر این هست که باید نمونه کد بذارین اینجا
اگر هم فکر میکنین jQuery درست کار نمیکنه باید بگم که اول پلاگین jQuery رو فراخوانی کردین؟
یه چیز هم خدمتتون عرض کنم که در اینجا از SCSS استفاده کرده که یک فریمورک CSS هست و نیاز به فراخوانی اون فایل داره
$mainColor: rgba(160,180,200,0.7);
$navColor: rgba(255,255,255,0.5);
همینطور که میبینین اینجا از تعریف متغیر استفاده کرده که با این امکان هرجا نوشته باشن $navColor، و از خط دوم رنگ رو تغییر بدن کل اون هایی که $navColor رو دارن رنگشون عوض میشه، کار رو ساده تر کرده، یه سری فریمورک در این رابطه هست LESS, SCSS, SASS
اگر چیز جدیدی اومده باشه خبر ندارم
برای جاوا اسکریپت هم از coffee script استفاده کردن که بنده چیزی در این رابطه نمیدونم
http://coffeescript.org/

[yasiphp]

بلور منظورتون شفافیتش هست؟ (opacity || alpha)
اگر این هست که باید نمونه کد بذارین اینجا
اگر هم فکر میکنین jQuery درست کار نمیکنه باید بگم که اول پلاگین jQuery رو فراخوانی کردین؟
یه چیز هم خدمتتون عرض کنم که در اینجا از SCSS استفاده کرده که یک فریمورک CSS هست و نیاز به فراخوانی اون فایل داره
$mainColor: rgba(160,180,200,0.7);
$navColor: rgba(255,255,255,0.5);
همینطور که میبینین اینجا از تعریف متغیر استفاده کرده که با این امکان هرجا نوشته باشن $navColor، و از خط دوم رنگ رو تغییر بدن کل اون هایی که $navColor رو دارن رنگشون عوض میشه، کار رو ساده تر کرده، یه سری فریمورک در این رابطه هست LESS, SCSS, SASS
اگر چیز جدیدی اومده باشه خبر ندارم
برای جاوا اسکریپت هم از coffee script استفاده کردن که بنده چیزی در این رابطه نمیدونم
http://coffeescript.org/
ممنون از جوابتون اقا امید.
منظورم فقط شفافیت نیست.وقتی به اون لینکی که دادم برید و اسکرول سایت رو پایین بکشید متوجه میشید که ناوبار تمام محتویاتی که در پشتش قرار میگیره رو به صورت مات و بلور نشون میده.احتمالا شما به اسکرول دست نزدید و متوجه این موضوع نشدید.
فرق کلی بین css و scss مگه چقدر هست؟مگه نباید این کدهارو درون یک فایل css قرار داد و اون فایل رو فراخوانی کرد؟خوب من هم همینکار رو درمورد کدهای scss انجام دادم.
در مورد کدهای جی کوئری هم کدهایی که خودش در باکس js قرار داده رو کپی کردم و در یک فایل به نام java.js قرار دادم و اون فایل رو هم فراخوانی کردم.
ولی نتیجه کار یک ناوبار به رنگ سفید بود که متوجه شدم مشکلی در کارم هست.و بعد کتابخانه جی کوئری رو از چند جا گرفتم و اضافه کردم ولی باز هم مشکل رفع نشد.
دوستان لطفا توجه کنید در صورتی که وارد لینک سایت codepen شدید اسکرول رو پایین بکشید و به ناوبار توجه کنید که همه محتویات رو به صورت مات و بلور نشون میده.ممنون

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

http://codepen.io/jdsteinbach/pen/Lhsok

[Omid Jackson]

دقیقا حضور ذهن ندارم ولی باید داخل خود scss باشه نه css و اینکه یک فایل جوا اسکریپت هم داره که باید توی html فراخوانی بشه
اگر امکانش هست آپلود کنید اینا رو ببینم چون ندیده دقیق نمیدونم ایراد کجاست

[yasiphp]

دقیقا حضور ذهن ندارم ولی باید داخل خود scss باشه نه css و اینکه یک فایل جوا اسکریپت هم داره که باید توی html فراخوانی بشه
اگر امکانش هست آپلود کنید اینا رو ببینم چون ندیده دقیق نمیدونم ایراد کجاست
آپلود کنم؟! چیرو ؟
اقا امید من فقط میخوام این نوع ناوبار رو توی dreamweaver پیاده کنم و نتیجش بشه اون چیزی که تو این سایت ها هست.شما فرض رو بر این بزار که هیچگونه سایتی وجود نداره...فقط کدنویسی در نرم افزار دریم ویور.ممنون
از بقیه دوستان هم تقاضا دارم کمی راهنمایی کنن...

[Omid Jackson]

آپلود کنم؟! چیرو ؟
اقا امید من فقط میخوام این نوع ناوبار رو توی dreamweaver پیاده کنم و نتیجش بشه اون چیزی که تو این سایت ها هست.شما فرض رو بر این بزار که هیچگونه سایتی وجود نداره...فقط کدنویسی در نرم افزار دریم ویور.ممنون
از بقیه دوستان هم تقاضا دارم کمی راهنمایی کنن...

الآن این بدون SCSS
https://jsfiddle.net/Blend_Design/1omLs479/embedded/result/
کد های SCSS رو به CSS تبدیل کردم
میتونین کد ها رو در اینجا (http://jsfiddle.net/Blend_Design/1omLs479/) ببینین، فقط jQuery یادتون نره!!!