یک راهنمای گام به گام
این که آیا منوی ناحیه شما یک ردیف افقی در بالای صفحه یا یک ردیف عمودی در سمت پایین است، هنوز فقط یک لیست است. هنگام طراحی ناوبری وب، اغلب فراموش شده است که یک منوی ناوبری فقط یک گروه از لینکهای برجسته است. اما اگر شما ناوبری خود را با استفاده از XHTML + CSS برنامه ریزی کنید، می توانید یک منو کوچک برای دانلود (XHTML) ایجاد کنید و آسان سفارشی سازی کنید (CSS).
شروع شدن
برای شروع طراحی یک فهرست برای ناوبری، شما باید از یک لیست استفاده کنید.
ممکن است یک لیست استاندارد غیر ارادی باشد که به عنوان ناوبری شناسایی شده است:
اگر شما دقیقا در HTML نگاه کنید، متوجه خواهید شد که پیوند «خانه» نیز یک ID از شما وجود دارد. این به شما امکان می دهد منو ایجاد کنید که مکان فعلی را برای خوانندگان شما مشخص کند. حتی اگر شما در حال حاضر با داشتن این نوع نشانه بصری در سایت خود برنامه ریزی نکنید، می توانید این اطلاعات را شامل کنید. اگر تصمیم به افزودن نشانه بعدا دارید، برای تهیه سایت خود، برنامه نویسی کمتری خواهید داشت.
بدون یک ظاهر کشی CSS ، این منوی XHTML به نظر می رسد مثل فهرست نامحدود استاندارد است. گلوله وجود دارد و آیتم های لیست کمی اندک هستند. از آنجا که من از لینک های حفره یا سوراخ استفاده می کنم، اکثر مرورگر ها لینک ها را به عنوان قابل کلیک (زیر خط دار و در رنگ آبی) نمایش نمی دهند. اگر در HTML بالا به یک صفحه وب وارد کنید، ناوبری شما اینگونه شبیه خواهد بود:
- خانه
- محصولات
- خدمات
- تماس با ما
این بسیار خسته کننده است و خیلی شبیه یک منو نیست. اما با تنها چند سبک CSS اضافه شده به لیست، می توانید یک منو ایجاد کنید که باعث افتخار شما می شود.
منوی مدیریت عمودی
منوی ناوبری عمودی بسیار آسان است برای نوشتن زیرا آن را به همان شیوه به عنوان یک لیست عادی نشان می دهد: بالا و پایین.
موارد لیست به صورت عمودی به پایین صفحه نمایش داده می شود.
هنگامی که من منوهای یک ظاهر طراحی شده را دوست دارم، در خارج از خانه شروع به کار میکنم. با این کار، منظورم این است که ابتدا اولی navigate را بزنم و سپس به عناصر li و سپس پیوندها و غیره حرکت کنم. بنابراین برای این منو، ابتدا عرض منو را تعریف می کنید. این اطمینان حاصل می کند که حتی اگر آیتم های منو طولانی باشند، بقیه طرح ها را پر می کنند و یا باعث پیمایش افقی نمی شوند.
ul # navigation {width: 12em؛ }
پس از تنظیم عرض، می توانم با موارد لیست بازی کنم. این اجازه می دهد تا به چیزهایی مانند (خلاص شدن از گلوله ها)، رنگ پس زمینه، مرز، تراز متن و حاشیه ها را تنظیم کنم.
ul # navigation لی {
لیست سبک: هیچ؛
رنگ پس زمینه: # 039؛
border-top: solid 1px # 039؛
text-align: left؛
حاشیه: 0؛
}
هنگامی که اصول اولیه آیتم های لیست را تنظیم می کنید، می توانید شروع به پخش کنید که چگونه منو در ناحیه لینک ها ظاهر می شود. ابتدا سبک UL # navigation LI A و سپس A: link A: visited، A: hover و A: فعال (اگر شما آنها را می خواهید). برای لینک ها، من دوست دارم لینک را یک عنصر بلوک (به جای پیش فرض در خط). این باعث می شود که آنها کل فضای LI را بگیرند و به صورت یک پاراگراف عمل می کنند و باعث می شود که آنها به عنوان دکمه های منو سبک تر شوند. چیز دیگری که من همیشه انجام می دهم این است که خط زیر را حذف کنید (text-decoration: none؛) به عنوان این باعث می شود که دکمه ها بیشتر به نظر دکمه ها برای من.
اما البته، طراحی شما ممکن است متفاوت باشد.
ul # navigation لی a {
نمایش: بلوک؛
متن دکوراسیون: هیچ؛
padding: .25em؛
border-bottom: solid 1px # 39f؛
border-right: solid 1px # 39f؛
}
توجه داشته باشید که با صفحه نمایش: بلوک؛ روی پیوندها تنظیم شده، کل جعبه آیتم منو قابل کلیک، و نه فقط حروف است. این نیز برای استفاده قابل استفاده است. اطمینان حاصل کنید که رنگ لینک (لینک، بازدید، شناور و فعال) را تنظیم کنید، اگر مایلید که آنها از رنگ آبی، قرمز و بنفش پیش فرض متفاوت باشند.
a: link، a: visited {color: #fff؛ }
a: شناور، a: فعال {color: # 000؛ }
من همچنین دوست دارم با تغییر رنگ پس زمینه توجه دولت را کمی بیشتر جلب کنم.
a: شناور {background-color: #fff؛ }
اگر شما نمونه های بیشتری از منوهای عمودی را دوست دارید، از لیست زیر استفاده کنید.
- منوی عمودی مدل دهید
- یک قالب منو پایه عمودی
- منوی عمودی مدل دهید با شما اینجا هستید
- قالب منو پایه عمودی با شما اینجاست
منوی تنظیمات افقی
ایجاد منوهای ناوبری افقی کمی از منوی پیمایش عمودی مشکل تر است زیرا شما باید این واقعیت را که لیست های HTML ترجیح می دهند به صورت عمودی نمایش داده شوند، جبران کنید. همانطور که در منوی افقی است، ابتدا لیست فهرست های ناوبری خود را ایجاد کنید:
برای ایجاد منوی افقی، همان کار را با منوی عمودی انجام دهید. شروع به کار با خارج و کار کردن. از آنجا که من می خواهم ناوبری من در گوشه سمت چپ شروع شود، من آن را با 0 حاشیه سمت چپ و padding، و من آن را به سمت چپ شناور. شما همچنین باید عادت به تنظیم عرض داشته باشید تا منو شما فضای بیشتری یا کمتر از آنچه که قصد دارید را نگیرد. برای منوهای افقی، این معمولا عرض کامل طراحی است. من همچنین یک رنگ پسزمینه را به لیست کامل اضافه کردم تا خواندن آن آسان تر شود.
ul # navigation {
شناور به سمت چپ؛
حاشیه: 0؛
padding: 0؛
عرض: 100٪؛
رنگ پس زمینه: # 039؛
}
اما راز منوی ناوبری افقی در موارد لیست است. عناصر لیست معمولا عناصر بلوکی هستند، به این معنی که آنها خط جدیدی را قبل و بعد از هر یک قرار می دهند. با تغییر صفحه نمایش از بلوک به inline، شما اجزای لیست را به صورت افقی کنار یکدیگر قرار می دهید.
ul # navigation لی {نمایش: inline؛ }
من لینک ها را دقیقا مانند همانطور که من در منوی ناوبری عمودی با همان رنگ ها و دکوراسیون متن رفتار کردم. من یک مرز بالا اضافه کردم تا دکمه هایی را که در آن ها شناور شده اند را مشخص کنید. تنها چیزی که من حذف کردم صفحه نمایش بود: بلوک؛ همانطور که خطوط خطوط جدید را به عقب بر می گرداند و منوی افقی را از بین می برد.
ul # navigation لی a {
متن دکوراسیون: هیچ؛
padding: .25em 1em؛
border-bottom: solid 1px # 39f؛
border-top: solid 1px # 39f؛
border-right: solid 1px # 39f؛
}
a: link، a: visited {color: #fff؛ }
ul # navigation لی a: شناور {
رنگ پس زمینه: #fff؛
رنگ: # 000؛
}
شما اینجا هستید اطلاعات مکان
یکی دیگر از جنبه های HTML، شناسه شما است. اگر می خواهید منو خود را تغییر دهید تا مکان فعلی کاربران خود را نشان دهد، به سادگی با استفاده از این شناسه برای تعریف یک رنگ پس زمینه دیگر و یا سبک دیگر استفاده کنید. انتقال شناسه ID به آیتم منو درست در صفحات دیگر به طوری که صفحه فعلی همیشه برجسته شده است.
ul # navigation لی # youarehere {background-color: # 09f؛ }
اگر این سبک ها را در صفحه خود قرار دهید، می توانید یک نوار منو افقی یا عمودی ایجاد کنید که با سایت شما کار می کند اما برای دانلود سریع و بسیار آسان برای به روز رسانی در آینده است. با استفاده از XHTML + CSS لیست شما را تبدیل به یک ابزار بسیار قدرتمند برای طراحی می کند.
اگر می خواهید نمونه های بیشتری از منوهای افقی را بخواهید، به موارد زیر مراجعه کنید.
- یک منوی افقی متناسببا
- قالب اصلی منوی افقی
- منوی افقی صفحه با استفاده از اینجا
- قالب اصلی منوی افقی با شما اینجاست