طراحی سایت | طراحی سایت تهران | طراحی سایت ارزان

با ما تماس بگیرید : 5-44251104-021
به نام بهترین طراح دنیا
  • طراحی سایت

امتیاز کاربران

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

 ایجاد منو ریسپانسیو برای طراحی سایت

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

  ساخت منو با html

ساخت منو با html

اولین مرحله برای اینکه بتوانید منو موبایلی خود را بسازید کدهای HTML هست که به این صورت باید استفاده کنید

<pre>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">صفحه اصلی</a>
<a href="#news">درباره ما </a>
<a href="#contact">تماس با ما</a>
<a href="#about">اخبار</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
</pre>

خوب بعد از اینکه فایل های HTML را جایگزین کردید نوبت این هست تا فایل های CSS را داخل کدهای خود بگذارید

<pre>
.topnav {
background-color: #333;
overflow: hidden;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}

.topnav .icon {
display: none;
}
</pre>

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

 ساخت منو برای موبایل

ساخت منو برای موبایل با html,css

در خط اول گفته می شود که وقتی صفحه بیشتر از 600PX بود نمایان شود وقتی صفحه بزرگتر از 600 می شود منو موبایلی پنهان شود

<pre>
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
</pre>

در خط دوم با کدهای CSS این را به مرورگر می گوییم که وقتی 600  شد به جایی اینکه منو رو به صورت عمودی نشان دهد آن را به صورت افقی نمایش دهد تا اینجای کار خیلی راحت بود

<pre>
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</pre>

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

<pre>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</pre>

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

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

 

درباره نويسنده

رضا رجب پور هستم کارشناسي رشته فناوري اطلاعات و ارتباطات 4 سال تجربه کاري در زمينه طراحي سايت و بهينه سازي سايت را دارم و به زبانهاي Html , CSS , CSS3 , Jquery , JavaScript , PHP تسلط کافي را دارم و مدير تيم مهندسين ساين وب که با چند تن از دوستان رشته نرم افزار و گرافيک يک تيم خلاق و با تجربه را ايجاد کرده ايم و بيش از 80 نمونه کار طراحي سايت و بهينه سازي سايت در ايران و خارج از ايران انجام داده ايم و خوشحال مي شويم که اطلاعات و تجربيات خود را در اختيار ديگران و هموطنان عزيز قرار دهيم لطفا ما را در شبکه هاي اجتماعي دنبال کنيد تا از مطالب جديد ما اطلاع پيدا کنيد با تشکر و احترام







لطفا نظر خود را بنویسید

لطفا نظر خود را بنویسید

0

نظرات کاربران

  • نظری وجود ندارد


نظرات مشتریان در مورد ما

جناب مهندس موسوی مدیر بخش IT شرکت پارس سرام : ما چهار سایت هلدینگ خود را به تیم مهندسین ساین وب سپردیم فکر نمی کردیم بتوانیم با همچین قیمتی سایتی با این کیفیت و جذاب برایمان طراحی کنند . با اینکه خودم برنامه نویس هستم ایده ها و افکت های جذابی طراحی کردند و هر چهار سایت با هم فرق دارد الان هم سایتی دیگر را به تیم مهندسین ساین وب سپرده ایم

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

جناب موسوی مدیر شرکت آژند : واقعا از طراحی سایت و ایده های خلاقانه و جذاب تیم مهندسین ساین وب شگفت زده شدم سایت من بیش از چیزی که انتظار داشتم بهتر شد ما هم در حوزه کاری خود با چند کلمه رتبه خوبی در گوگل داریم بعد از مدتی کوتاهی از آقای مهندس رجب پور مدیر تیم مهندسین ساین وب کمال تشکر را دارم

مهندس هراتی مدیر سایت تهران آهن : از نحوه طراحی سایت و گرافیک سایت و پشتیبانی عالی ساین وب واقعا راضی هستم ما بعد از دو ماه با کلمه قوطی و پروفیل صفحه یک گوگل هستیم از خانم گرایلی مسئول پشتیبانی سایت و کارشناس سئو کمال تشکر را دارم

لطفا مارا در گوگل محبوب کنید