it-swarm-ko.tech

Bartik 기본 메뉴를 Superfish로 바꾸는 방법

기본 Bartik 메뉴에서는 스타일이있는 하위 메뉴를 만들 수 없으므로 Superfish 메뉴를 만들었습니다.
Bartik 기본 메뉴를 정확한 위치에 Superfish로 바꾸려면 어떻게해야합니까?

3
jone

Superfish와 유사한 다른 메뉴 모듈에 Bartik 기본 메뉴 스타일을 적용하는 방법 라는 보고서를 찾았습니다. 기본적으로, Superfish에서 사용하는 CSS 스타일을 테마에서 사용하는 CSS 스타일에 적용하는 것이 아니라 테마에서 사용하는 CSS 스타일을 Superfish에서 사용하는 CSS 스타일에 포함시키는 것이 요령입니다.

해당 게시물에보고 된 단계는 다음과 같습니다 (형식을 변경하기 위해 편집 중입니다).

  • 새 스타일 시트 (NewStyleSheet.css)를 작성하여 파일 디렉토리에 저장하십시오.
  • / admin/structure/block에서 Superfish에 대한 블록 설정을 편집하십시오. 이 단계 목록은 "메뉴 표시 줄"또는 이와 유사한 블록 영역이 포함 된 템플릿을 사용한다고 가정합니다.
    • 드롭 다운 선택기 값을 "메뉴 막대"로 변경하여 "Superfish X"블록을 "메뉴 막대"영역으로 이동하십시오.
    • 설정 페이지 맨 오른쪽의 "작업"에서 "구성"을 클릭하십시오.
    • "Superfish Settings"에서 "Menu Type"을 "NavBar"로 변경하십시오.
    • 선택적으로, "그림자"및 "자동 화살표"둘 다에서 "아니오"를 선택하십시오. CSS가 올바르게 표시되도록하려면 CSS를 수정하는 데 시간이 더 오래 걸립니다.
    • "고급 설정"에서 새 스타일 시트 위치를 "추가 CSS"에 추가하십시오.

이것은 새로운 CSS 파일의 내용입니다.

/* $Id: whiteTab.css,v 1.0 2011/02/18 05:45:00 erok415 Exp $ */

/*-------------------------------------------------------------*/
/*                                                             */
/*      Important - Be sure to change all references           */
/*      from #superfish-3 below to match the number of the     */
/*      Superfish "X" block region you are using in your       */
/*      Block Settings. I used block region Superfish 3,       */
/*      hence I am using #superfish-3 below.                   */
/*                                                             */
/*-------------------------------------------------------------*/

/*-------------------------------------------------------------*/
/*                                                             */
/*   I have not attempted to use style the 4th level flyout,   */
/*      Auto-arros or the drop shadow features.                   */
/*                                                             */
/*-------------------------------------------------------------*/

#menu-bar{
  margin-bottom:10px;/* Add padding so secondary navigation doesn't run over search sidebar. */
}

sfHover, ul#superfish-3 > li:hover{
  background: none repeat scroll 0% 0% transparent; /* Remove the default background on top level tabs in default state and hover state. */
}

ul#superfish-3 li.sfHover li  a:hover, ul#superfish-3  li.sfHover  li a.active{ /*Secondary Nav: add effect to hover or active state here. */
  color:#09F;
  width:100%;
}

ul#superfish-3 > li > a{ /* Fist level horizontal navigation. */
  margin:4px 2px 0 0; /* Spacing around tabs. */
  color: #333;
  background: #fff;
  background: rgba(255, 255, 255, 1.0);
  float: left; /* LTR */
  padding:0px 6px 6px 6px;
  /* height: 1.8em;
  line-height: 2.4em;
  padding: 0 0.8em; */
  text-decoration: none;
  /* text-shadow: 0 0.5px #999; */
  font-weight:bold;
  -khtml-border-radius-topleft: 8px;
  -khtml-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

ul#superfish-3 > li.sfHover {
  background: none repeat scroll 0% 0% transparent; /* Remove the default background from the sfHover state. */
}

ul#superfish-3 > li.sfHover > a { /* First level hover and active state. */
  margin:4px 2px 0 0; /* Spacing around tabs. */
  color: #333;
  background: #999;
  background: rgba(153, 153, 153, 1.0);
float: left; /* LTR */
  padding:0px 6px 6px 6px;
  /* height: 1.8em;
  line-height: 2.4em;
  padding: 0 0.8em; */
  text-decoration: none;
  /* text-shadow: 0 0.5px #999; */
  font-weight:bold;
  -khtml-border-radius-topleft: 8px;
  -khtml-border-radius-topright: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/*------------------- Secondary Nav -------------------*/
.sf-navbar > li > ul{ /* Add background color to secondary nab only. */
  background:none repeat scroll 0% 0% rgb(51, 51, 51);
  background: #333;
}

ul#superfish-3 > li > ul{
  left:-15px; /* Align the menu with the left Edge of design. */
  border-right:30px solid #333;/* Add the background color to the right Edge because the style attribute above leaves a blank spot due to global conditions. */
}

ul#superfish-3 > li > ul > li {
  left:15px;/*Fix: aligns secondary level nav text with top level nav*/
  border:0;
}

ul#superfish-3 > li.sfHover > ul > li > a{ /* Secondary Nav: Remove tab effect from sfHover state applied to lower level nav. */
  color:#fff;
  background: #333;
  -khtml-border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-top: 0px;
  border-radius: 0px;
  width:100%;
  height:2.0em;
  line-height:1.1em;
  padding:6px 0 0 6px;
  margin:0 16px 0 0;
}

ul#superfish-3 > li > ul > li > a{ /* Secondary horizontal navigation. */
  color:#fff;
  font-weight:bold;
  /* text-shadow: 0 0.5px #CCC; */
  background: none repeat scroll 0% 0% transparent;
  -khtml-border-radius:0;
  -moz-border-radius:0;
  -webkit-border-radius:0;
  padding:0;
}

/*--------------- Third level DropDown navigation ------------*/
ul#superfish-3 > li > ul > li > ul {
  -khtml-border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-top: 0px;
  border-radius: 0px;
  margin:0;
  padding:0 0 0 6px;
  border:0;
  left:-0px;
  background: none repeat scroll 0% 0% transparent;
}

ul#superfish-3 > li > ul > li > ul > li  {  
  margin:0px;
  border-right:0;
  left:0;
  border:0;
  padding:6px 6px 0px 6px;
  background:#333;
}

ul#superfish-3 > li > ul > li > ul > li:hover{
}

ul#superfish-3 > li > ul > li > ul > li > a {
  background:#333;
  margin:0;
  padding:0 6px 0px 6px;
  line-height:1.3em;
  background:#333;
}

ul#superfish-3 > li > ul > li > ul > li > a:hover {
  background: none repeat scroll 0% 0% transparent !important;
}
2
kiamlaluno

이 지침에 감사하지만 Bartik 모양을 근사화하는 더 좋은 방법을 찾았습니다.

위와 거의 동일하지만 Menu Type 대신 'Horizontal'을 선택한 다음 아래 코드를 사용하여 실제 CSS의 스타일을 Bartik의 메뉴와 유사하게 만드십시오.

다음은 'superfish-bartik.scss'라는 내 SASS 코드입니다. 위에 지시 된대로 CSS 파일 경로에서 해당 사용자 정의 파일을 Superfish로 지정하십시오.

.block-superfish {    
  position: absolute; /* position at bottom of header region */
  left: 0;
  bottom:0;   
  ul.sf-menu {
    background-color: transparent;
    li {
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(255, 255, 255);
        /* RGBa with 0.6 opacity */
        background: rgba(255, 255, 255, 0.6);
        /* For IE 5.5 - 7*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
        /* For IE 8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
        margin: 0 2px;
        border-radius: 8px 8px 0 0;
        &:hover {
            background: rgba(255, 255, 255, 0.9);
        }
        a {
            color: #000;
            font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
            padding: 10px;
            text-decoration: none;
        }
        ul {
            margin-top: 3px;
            li {
                border-radius: 0;
            }
        }
    }
}

SASS를 사용하지 않는 경우 CSS는 다음과 같습니다.

  .block-superfish {
      position: absolute; /* position at bottom of header region */
      left: 0;
      bottom:0;  
    }
  .block-superfish ul.sf-menu {
    background-color: transparent; }
    .block-superfish ul.sf-menu li {
      /* Fallback for web browsers that doesn't support RGBa */
      background: white;
      /* RGBa with 0.6 opacity */
      background: rgba(255, 255, 255, 0.6);
      /* For IE 5.5 - 7*/
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF);
      /* For IE 8*/
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF, endColorstr=#7FFFFFFF)";
      margin: 0 2px;
      border-radius: 8px 8px 0 0; }
      .block-superfish ul.sf-menu li:hover {
        background: rgba(255, 255, 255, 0.9); }
      .block-superfish ul.sf-menu li a {
        color: #000;
        font: 13px/13px "Helvetica Neue",Helvetica,Arial,sans-serif;
        padding: 10px;
        text-decoration: none; }
      .block-superfish ul.sf-menu li ul {
        margin-top: 3px; }
        .block-superfish ul.sf-menu li ul li {
          border-radius: 0; }
0
PWM