انجمن پشتیبانی فارسی IPS

انجمن پشتیبانی فارسی IPS

رفتن به مطلب

هر آن چیزی که برای نیاز دارید


داشتن انجمن دیگر یک رویا نیست...!

چگونه Navbar کشویی کنم ؟


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

  • تیم مدیریت

سلام و درود ، سوالی داشتم درمود نو بار ، میخوام این navbar قالب دیفالت رو کشویی کنم کسی میدونه چطوری ؟

@Arash.Ranjbar @Sajjad 

  • پسند 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر کل | موسس سایت

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

اگر تا فردا صب کنی کدشو برات میزنم. اگرم کسی زودتر جوابتو داد که هیچ

  • پسند 1
  • تشکر 1

IPSforum.ir  arash-sn.png

 

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

  • مدیر کل | موسس سایت

کدهای زیر رو تو custom.css قرار بده

#ipsLayout_header nav {
  background:#000;
  position: relative;
  flex-grow: 8;
  font-weight: 600;
  margin: 0 5px;
}

#ipsLayout_header nav::after {
  height: 0;
}

.ipsNavBar_primary {
  margin-bottom: 0;
}

.ipsNavBar_primary > ul > li {
  position: relative;
  margin: 0 5px;
}

.ipsNavBar_primary > ul > li > a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  position: relative;
  text-decoration: none;
  background: linear-gradient(45deg, var(--secondaryColor), var(--mainColor)) bottom / 0 .1em no-repeat;
  transition: 200ms background-size;
  padding: 0px 10px;
}

.ipsNavBar_primary > ul > li > a:hover {
  background-size: 100% .1em;
}

.ipsNavBar_active .ipsNavBar_active__identifier {
  display: none;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--mainColor);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child{
  background-size: 100% .1em;
}

.ipsNavBar_secondary:before {
  content: '';
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--secondarynavbar-bg);
  z-index: 9999999;
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
}

.ipsNavBar_secondary {
  background-color:#0000;
  min-width: 215px;
  top: calc(100% + 12px);
  border-radius:#000;
  opacity: 0;
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.ipsNavBar_secondary::after {
  content: '';
  top: -12px;
  position: absolute;
  height: 12px;
  width: 100%;
  display: block;
}

.ipsNavBar_primary > ul > li:hover > .ipsNavBar_secondary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: bubble 200ms;
}

@keyframes bubble {
  0% {
    transform: translate(0, 50px);
  }

  50% {
    transform: translate(0, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.ipsNavBar_secondary > li {
  float: none !important;
  display: block;
}

.ipsNavBar_secondary > li > a {
  float: none;
  text-align: left;
}

حالا تو تب فایل فایل navbar  رو پیدا کن و دنبال کد زیر بگرد

<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

و با کد زیر جایگزین کن:

<nav class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

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

من این کدو برای خودم زده بودم که بعدا بدلایلی مجبور شدم تغییر بدم. 

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

  • تشکر 2

IPSforum.ir  arash-sn.png

 

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

  • تیم مدیریت
در ۱ ساعت قبل، Arash.Ranjbar گفته است :

کدهای زیر رو تو custom.css قرار بده

#ipsLayout_header nav {
  background:#000;
  position: relative;
  flex-grow: 8;
  font-weight: 600;
  margin: 0 5px;
}

#ipsLayout_header nav::after {
  height: 0;
}

.ipsNavBar_primary {
  margin-bottom: 0;
}

.ipsNavBar_primary > ul > li {
  position: relative;
  margin: 0 5px;
}

.ipsNavBar_primary > ul > li > a {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  position: relative;
  text-decoration: none;
  background: linear-gradient(45deg, var(--secondaryColor), var(--mainColor)) bottom / 0 .1em no-repeat;
  transition: 200ms background-size;
  padding: 0px 10px;
}

.ipsNavBar_primary > ul > li > a:hover {
  background-size: 100% .1em;
}

.ipsNavBar_active .ipsNavBar_active__identifier {
  display: none;
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--mainColor);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.ipsNavBar_primary > ul > li.ipsNavBar_active > a:first-child{
  background-size: 100% .1em;
}

.ipsNavBar_secondary:before {
  content: '';
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--secondarynavbar-bg);
  z-index: 9999999;
  position: absolute;
  top: -10px;
  left: 16px;
  width: 0;
  height: 0;
}

.ipsNavBar_secondary {
  background-color:#0000;
  min-width: 215px;
  top: calc(100% + 12px);
  border-radius:#000;
  opacity: 0;
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.ipsNavBar_secondary::after {
  content: '';
  top: -12px;
  position: absolute;
  height: 12px;
  width: 100%;
  display: block;
}

.ipsNavBar_primary > ul > li:hover > .ipsNavBar_secondary {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: bubble 200ms;
}

@keyframes bubble {
  0% {
    transform: translate(0, 50px);
  }

  50% {
    transform: translate(0, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.ipsNavBar_secondary > li {
  float: none !important;
  display: block;
}

.ipsNavBar_secondary > li > a {
  float: none;
  text-align: left;
}

حالا تو تب فایل فایل navbar  رو پیدا کن و دنبال کد زیر بگرد

<nav data-controller='core.front.core.navBar' class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

و با کد زیر جایگزین کن:

<nav class='{{if !\count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} {{if !$preview}}ipsResponsive_showDesktop{{endif}}'>

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

من این کدو برای خودم زده بودم که بعدا بدلایلی مجبور شدم تغییر بدم. 

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

مرسی چشم

  • خوشحال 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

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

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

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

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

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

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

ورود به حساب کاربری
 اشتراک گذاری

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • ایجاد مورد جدید...

اطلاعات مهم

برای تجربه رابط کاربری بهتر و تعامل بهتر شما با انجمن ما از کوکی ها استفاده میکنیم قوانین