رفتن به مطلب

اضافه کردن لوگو به منوی اصلی


Elham

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

با سلام و خسته نباشید

آدرس وب سایتم:

www.bonap.ir

می خوام منوی اصلی مشابه

https://catering.kfc.com/#content=/Home/UserHome

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

لطفا راهنماییم کنید. ممنون

لینک به ارسال

سلام

شما منوی اولیه رو ایجاد کنید با تگ های ul و li ... و بهشون display:inline بدید ، بعد از اون به لوگو کلاس جدا بدید ، خصیصه های مهمی که کلاس لوگو باید داشته باشه اینا هستن :


float:left;
position:relative;

لینک به ارسال

سلام ممنون

از این روش استفاده کردم که آقای ایمان فخار بهم در سوال قبلی آموزش داده بودن خیلی به دردم خورد.

این کد رو به کد های منو اضافه کردم:

.main-navigation ul.nav-menu,

.main-navigation div.nav-menu > ul {

display: inline-block !important;

text-align: left;

width: 100%;

line-height: 2.846153846;

border: 6px solid #ccc;

background:#dd1d24;

margin:0px 0px 0px 0px;

padding: 0 1.4em;

background-image:url('http://www.bonap.ir/up/bon2.jpg');

background-repeat:no-repeat;

background-position:left center;

لینک به ارسال

این قالب از عکس استفاده کرده برا این کار :

https://catering.kfc.com/Content/images/nav/menu-divider.jpg

اما با Css هم میشه ، کافیه شما border-right-color بدید ...

لینک به ارسال

خب شما باید بهش استایل بدید ! مثلا نسبت به رنگ زمینه اش بهش یه رنگ تیره تر بدید تا حالت فرو رفتگی پیدا کنه و مثل عکس نمونه ای بشه که دادید . ( مثلا می تونید از خصوصیت box-shadow هم استفاده کنید برای استایل دهی )

لینک به ارسال

نه من فکر کنم منظورم رو بد گفتم

در حقیقت سوالم اینه که می خوام بین هر آیکون منو border بیفته

نمونه:

http://www.kfc.com/

منوی اصلی رو ببینید بین هر دو آیتم یه حالت بوردر هست که حالت دکمه داده به آیکون ها

لینک به ارسال

خوب border بدید باید خط های کنارش بیاد

برای شما نمیاد؟

لینک به ارسال

نه نمیاد الان ببینید من این دستور رو اضافه کردم:

border-right: 3px solid #222;

یه خط فقط انداخت سمت راست منو

به اینجا اضافه کردم:

/* =Menu

-------------------------------------------------------------- */

#access {

background: #e31e25; /* Show a solid color for older browsers */

background: -moz-linear-gradient(#842624, #e31e25);

background: -o-linear-gradient(#842624, #e31e25);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#842624), to(#e31e25)); /* older webkit syntax */

background: -webkit-linear-gradient(#842624, #e31e25);

-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;

-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;

box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;

clear: both;

display: block;

float: left;

margin: 0 auto 2px;

width: 100%;

border: 6px solid #ececec;

margin:0px 0px 0px 0px;

border-right: 3px solid #222;

}

لینک به ارسال

در قسمت

}

#access a {

color: #eee;

display: block;

line-height: 3.333em;

padding: 0 1.2125em;

text-decoration: none;

border-right: 1px solid #222;

border-right: 1px solid #ececec;

اضافه کردم شد . :D

لینک به ارسال

اون حالت تورفتگی براساس رنگ پس زمینه هست

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

لینک به ارسال

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

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

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

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

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

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

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

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

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