Elham

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

14 پست در این موضوع قرار دارد

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

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

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

به اشتراک گذاری این پست


لینک به پست

آقا میخوام دقیقا مثل نمونه ای که مثال زدم بشه . حالت فرو رفتگی پیدا کنه .

به اشتراک گذاری این پست


لینک به پست

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

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

به اشتراک گذاری این پست


لینک به پست

ممنونم آقا مرتضی رنگ ها رو کمی تیره کردم درست شد خیلی خوب شد مرسی

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری