(스타벅스)헤더_ Main Menu // 드롭다운

포인트

HTML

**position:fixed 를 이용하여 화면이 바뀌어도 해당 요소 고정.

** z-index:정수로 해당요소가 다른 요소 위에 위치할 수 있도록 설정 _ 정수 값이 클 수록 위에 위치

** cursor:pointer 로 커서 모양 변경 가능

** background-image : url("이미지위치")로 배경에 이미지 삽입

 

CSS

** border-radius: 위 왼 아 오 로 각모서리의 곡률을 설정 

 

 

결과

나만 알아볼수 있을듯......

HTML

<ul class="mainmenu">
        <li class="item">
          <div class="item__name">COFFEE</div>

          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>커피</h4>
                  <ul>
                    <li>스타벅스 원두</li>
                    <li>스타벅스 비아</li>
                    <li>스타벅스 오리가미</li>
                  </ul>
                </li>
                <li>
                  <h4>에스프레소 음료</h4>
                  <ul>
                    <li>도피오</li>
                    <li>에스프레소 마키아또</li>
                    <li>아메리카노</li>
                    <li>마키아또</li>
                    <li>카푸치노</li>
                    <li>라떼</li>
                    <li>모카</li>
                    <li>리스트레또 비안코</li>
                  </ul>
                </li>
                <li>
                  <h4>커피 이야기</h4>
                  <ul>
                    <li>스타벅스 로스트 스팩트럼</li>
                    <li>최상의 아라비카 원두</li>
                    <li>한 잔의 커피가 완성되기까지</li>
                    <li>클로버® 커피 추출 시스템</li>
                  </ul>
                </li>
                <li>
                  <h4>최상의 커피를 즐기는 법</h4>
                  <ul>
                    <li>커피 프레스</li>
                    <li>푸어 오버</li>
                    <li>아이스 푸어 오버</li>
                    <li>커피 메이커</li>
                    <li>리저브를 매장에서 다양하게 즐기는 법</li>
                  </ul>
                </li>
              </ul>

            </div>
            <div class="contents__texture">
              <ul class="inner">
                <li>
                  <p class="white">나와 어울리는 커피 찾기</p>
                  <p class="green">스타벅스가 여러분에게 어울리는 커피를 찾아드립니다</p>
                </li>
                <li>
                  <p class="white">최상의 커피를 즐기는법</p>
                  <p class="green">여러가지 방법을 통해 다양한 풍미의 커피를 즐겨보세요</p>
                </li>
              </ul>
            </div>

          </div>
        </li>
      </ul>

CSS

header .mainmenu{
  display: flex;
  position: absolute;
  right:0px;
  bottom: 0px;
  z-index: 1;
  margin:auto
}
header .mainmenu .item {
  
}
header .mainmenu .item .item__name{
padding: 10px 20px 34px 20px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

header .mainmenu .item:hover .item__name{
  background-color: #333;
  border-radius: 10px 10px 0  0;
  color:#669955

}
header .mainmenu .item .item__contents{
width:100%;
position: fixed;
left:0;
display: none;
color:white;
}
header .mainmenu .item:hover .item__contents{
  display: block;
}

header .mainmenu .item .item__contents .contents__menu{
  background-color: #333;

}

header .mainmenu .item .item__contents .contents__menu>.inner{
  display: flex;
  padding: 20px 0;
}

header .mainmenu .item .item__contents .contents__menu>.inner > li{
  width:220px;
}

header .mainmenu .item .item__contents .contents__menu >.inner > li> ul {
  
}

header .mainmenu .item .item__contents .contents__menu >.inner > li > h4 {
  padding : 5px 0px 10px 0px;
  font-size: 12px;
  font-weight: bolder;
 
}

header .mainmenu .item .item__contents .contents__menu >.inner > li > ul li {
  padding :5px 0px;
  font-size: 12px;
  color:#999;
  cursor: pointer;
}

header .mainmenu .item .item__contents .contents__menu >.inner > li > ul li:hover {
  color:#669900
  }

header .mainmenu .item .item__contents .contents__texture{
  background-image: url("../images/main_menu_pattern.jpg");
 
}


header .mainmenu .contents__texture >.inner {
  padding: 30px 0
}

header .mainmenu .contents__texture >.inner li {
  margin-top: 10px;
}

header .mainmenu .contents__texture >.inner p {
 line-height: 1.5;
 font-size: 12px;
  font-weight:700
}
header .mainmenu .contents__texture >.inner .green {
  padding-bottom: 5px;
  color:#669955
}