امروز برای شما یاران قالب گراف کد منو های ثابت در چهار گوشه وب رو آماده کردم ، که در طرحی بازشونده و با رنگبندی دلخواه و آموزش تغییر رنگ آماده استفاده شما عزیزان قالب گرافی هست
زیاد توضیح ندم چون حالم زیاد خوش نیست پس بریم سراغ اصل مطلب:
راهنما استفاده : پیش از شروع برای دیدن نمونه آنلاین کد(دمو/پیش نمایش)
اینجا را کلیک کنید.
در هریک از کد های زیر به جای ((عنوان لینک)) عنوان مربوطه مثل انجمن و عضویت و ... رو درج کنید و به جای (( # ))لینک مربوطه به همان عنوان را پیش از آن درج کنید
کد برای گوشه سمت راست بالا:
کد برای گوشه سمت چپ بالا:
<style> @font-face {font-family: 'BYekan';src: url('http://ghalebgraph.ir/temp/fonts/BYekan.eot?#') format('eot'),url('http://ghalebgraph.ir/temp/fonts/BYekan.ttf') format('truetype'),url('http://ghalebgraph.ir/temp/fonts/BYekan.woff') format('woff');} .GhalebGraphGGplusMenu-tl a{text-decoration:none;} .GhalebGraphGGplusMenu-tl { position:fixed; top:0; left:0; z-index:99999999999; background:#006EDE url(http://up.ghalebgraph.ir/up/galebgraph/posts/code/css/08/ggplus2.png); width:48px; height:48px; direction:rtl; } .GhalebGraphGGplusMenu-tl ul { list-style:none; padding:0; margin:0; visibility:hidden; opacity:0; top:25px; left:25px; background:#006EDE; position:absolute; width:160px; box-shadow:0 0 3px rgba(0,0,0,0.3);} .GhalebGraphGGplusMenu-tl ul li a { font:20px BYekan; color:#FFF; display:block; height:40px; line-height:35px; padding:0 10px 0 0; position:relative; } .GhalebGraphGGplusMenu-tl ul li a:hover { background:rgb(169, 104, 54); } .GhalebGraphGGplusMenu-tl:hover ul { opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;} </style> <div class="GhalebGraphGGplusMenu-tl"><ul> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="http://ghalebgraph.ir/">دریافت کد منو</a></li> </ul></div>
کد برای گوشه سمت راست پایین:
<style> @font-face {font-family: 'BYekan';src: url('http://ghalebgraph.ir/temp/fonts/BYekan.eot?#') format('eot'),url('http://ghalebgraph.ir/temp/fonts/BYekan.ttf') format('truetype'),url('http://ghalebgraph.ir/temp/fonts/BYekan.woff') format('woff');} .GhalebGraphGGplusMenu-br a{text-decoration:none;} .GhalebGraphGGplusMenu-br { position:fixed; bottom:0; right:0; z-index:99999999999; background:#006EDE url(http://up.ghalebgraph.ir/up/galebgraph/posts/code/css/08/ggplus4.png); width:48px; height:48px; direction:rtl; } .GhalebGraphGGplusMenu-br ul { list-style:none; padding:0; margin:0; visibility:hidden; opacity:0; bottom:25px; right:25px; background:#006EDE; position:absolute; width:160px; box-shadow:0 0 3px rgba(0,0,0,0.3);} .GhalebGraphGGplusMenu-br ul li a { font:20px BYekan; color:#FFF; display:block; height:40px; line-height:35px; padding:0 10px 0 0; position:relative; } .GhalebGraphGGplusMenu-br ul li a:hover { background:rgb(169, 104, 54); } .GhalebGraphGGplusMenu-br:hover ul { opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;} </style> <div class="GhalebGraphGGplusMenu-br"><ul> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="http://ghalebgraph.ir/">دریافت کد منو</a></li> </ul></div>
کد برای گوشه سمت چپ پایین:
<style> @font-face {font-family: 'BYekan';src: url('http://ghalebgraph.ir/temp/fonts/BYekan.eot?#') format('eot'),url('http://ghalebgraph.ir/temp/fonts/BYekan.ttf') format('truetype'),url('http://ghalebgraph.ir/temp/fonts/BYekan.woff') format('woff');} .GhalebGraphGGplusMenu-bl a{text-decoration:none;} .GhalebGraphGGplusMenu-bl { position:fixed; bottom:0; left:0; z-index:99999999999; background:#006EDE url(http://up.ghalebgraph.ir/up/galebgraph/posts/code/css/08/ggplus3.png); width:48px; height:48px; direction:rtl; } .GhalebGraphGGplusMenu-bl ul { list-style:none; padding:0; margin:0; visibility:hidden; opacity:0; bottom:25px; left:25px; background:#006EDE; position:absolute; width:160px; box-shadow:0 0 3px rgba(0,0,0,0.3);} .GhalebGraphGGplusMenu-bl ul li a { font:20px BYekan; color:#FFF; display:block; height:40px; line-height:35px; padding:0 10px 0 0; position:relative; } .GhalebGraphGGplusMenu-bl ul li a:hover { background:rgb(169, 104, 54); } .GhalebGraphGGplusMenu-bl:hover ul { opacity:1; visibility:visible; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;} </style> <div class="GhalebGraphGGplusMenu-bl"><ul> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="#">عنوان لینک</a></li> <li><a target="_blank" href="http://ghalebgraph.ir/">دریافت کد منو</a></li> </ul></div>
آموزش تغییر رنگ و اختصاصی سازی کد برای علاقه مندان : + جهت تغییر رنگ پست زمینه منو از آبی به رنگ های دیگر کافیست کد رنگ خود را در هر یک از کدهایی که استقاده میکنید به جای کد رنگی #006EDE درج کنید. نکته: کد رنگی بالا 2 بار در کد موجود هست که اولی برای پست زمینه علامت + و دومی برای پست زمینه منو ها می باشد. + جهت تغییر رنگ متن عناوین لینک ها کد رنگی خود را در هر یک از کد ها به جای کد رنگی <#FFF درج کنید + جهت تغییر رنگ پست زمینه عناوین لینک ها وقتی موس روی آنها نگه داشته میشود به رنگ دیگر کد رنگی خود را در کدهای بالا به جای کد رنگی rgb(169, 104, 54) درج نمایید + جهت تغییر اندازه سایز متن عناوین لینک ها سایز مد نظر خود را به جای عبارت 20px در کدهای بالا درج نمایید + جهت تغییر پهنای عناوین لینک ها سایز مد نظر خود را به جای عبارت 160px در کدهای بالا درج نمایید + برای یافتن کد رنگ ها از ابزار مقابل استفاده کنید: #