세로 텍스트 메뉴에 적절한 CSS를 사용하려면 어떻게해야합니까?

저는 세로로 회전 된 사이드 바 메뉴에 대해 최악의 CSS를 만들었습니다. 이 적절한 CSS를 만드는데 도움이 필요하십니까? 목록 컨테이너 DIV도 회전하려고했습니다. 그러나 다시 나는 위치 여기세로 텍스트 메뉴에 적절한 CSS를 사용하려면 어떻게해야합니까?

을 제어 할 수있는 것은 메뉴

.slidebar_container { 
 
    position: relative; 
 
    left: 0px; 
 
    top: 0px; 
 
    display: block; 
 
    width: 58px; 
 
    height: 400px; 
 
    margin-bottom: 2px; 
 
    padding-top: 0px; 
 
    float: none; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    border-radius: 50px; 
 
    background-color: #393e45; 
 
} 
 

 
.sidebar_list_item { 
 
    display: block; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    float: right; 
 
    clear: none; 
 
    font-family: Poppins, sans-serif; 
 
    color: #fff; 
 
    line-height: 58px; 
 
    font-size:12px; 
 
    font-weight: 700; 
 
} 
 

 
.sidebar_menu_list { 
 
    position: absolute; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    display: block; 
 
    width: 440px; 
 
    height: 50px; 
 
    margin: -58px -185px 130px 63px; 
 
    padding-left: 0px; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-align-content: flex-start; 
 
    -ms-flex-line-pack: start; 
 
    align-content: flex-start; 
 
    -webkit-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
} 
 

 
.services_section { 
 
    display: block; 
 
    height: 100%; 
 
    background-color: rgb(0, 152, 255); 
 
}

<div class="services_section"> 
 
     <div class="slidebar_container"> 
 
     <ul class="sidebar_menu_list w-clearfix w-list-unstyled"> 
 
      <li class="sidebar_list_item">Quality</li> 
 
      <li class="sidebar_list_item">Pricing</li> 
 
      <li class="sidebar_list_item">Turnaround</li> 
 
      <li class="sidebar_list_item">Translation</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div>

출처

2017-05-17 delizade

당신이 "적절한 CSS"무엇을 의미합니까 도움 (원래 here를보십시오). –

@delizade 답변을 올렸습니다. 그것은 잘 작동하는 것 같습니다. 봐. 그런 다음 http : //www.stackoverflow/help/accepted-answer를 방문하여 효과가있는 경우 담당자를 얻을 수있는 방법을 확인하십시오! (비록 겉으로보기에 당신은 3 년 넘게 사이트에 있었습니까? .. 흠 .. 호버 + 클릭 .. 열심히) –

코드 등 소량 여기 CSS의 엄청난 금액이 될 것 같다에게 있습니다. 대부분을 제거하는 열쇠는 CSS에 transform-origin을 추가하는 것입니다. 그런 다음 덧씌우 기 조절 (어떻게 번호를 얻었습니까?) 및 위치 고정 등의 작업을 수행합니다.

절대 위치 지정을 아껴서 사용하십시오. 단지 힌트를주세요. 반응 형 디자인이 필요합니다.

다른 단락을 추가하여 섹션에 다른 텍스트를 추가하는 방법을 보여줍니다.

다음 코드를보십시오 :

nav { 
 
    position: relative; 
 
    display: inline; 
 
    width: 50px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    float: left; 
 
    border-radius: 30px; 
 
    background-color: #393e45; 
 
} 
 

 
.sidebar_list_item { 
 
    height: 40px; 
 
    text-align: center; 
 
    z-index: 1; 
 
    font-family: Poppins, sans-serif; 
 
    color: #ffffff; 
 
    line-height: 1em; 
 
    font-size: 0.9em; 
 
    font-weight: 700; 
 
    -webkit-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    transform-origin: left top 0px; 
 
    vertical-align: middle; 
 
    padding: 34px 0px 30px 0px; 
 
} 
 

 
#sidebar_menu_list { 
 
    list-style: none; 
 
    position: relative; 
 
    margin-left: -55px; 
 
    margin-top: 22vh; 
 
    margin-bottom: 15vh; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 

 
#services_section, 
 
body { 
 
    background: #8FBAC8; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-left: 0; 
 
    margin-left: 20px; 
 
    width: 80%; 
 
} 
 

 
.text { 
 
    color: #696969; 
 
} 
 

 
.end { 
 
    color: #AFAFA4; 
 
}

<body> 
 
    <div id="services_section"> 
 
    <nav> 
 
     <ul id="sidebar_menu_list"> 
 
     <li class="sidebar_list_item">Quality</li> 
 
     <li class="sidebar_list_item">Pricing</li> 
 
     <li class="sidebar_list_item">Turnaround</li> 
 
     <li class="sidebar_list_item">Translation</li> 
 
     </ul> 
 
    </nav> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat turpis, semper vitae tortor tincidunt, venenatis ultrices augue. Praesent dictum at purus id viverra. Integer felis eros, consequat ut malesuada quis, venenatis iaculis dui.</p> 
 
    <p 
 
     class="text">In odio ipsum, hendrerit finibus eleifend non, condimentum quis sem. In posuere, ante ac ullamcorper finibus, tortor leo congue felis, id lacinia dui urna tincidunt erat. Proin eleifend nulla laoreet nunc tincidunt sagittis. Aenean scelerisque iaculis 
 
     enim ac fringilla. Vestibulum vehicula ex sit amet lorem vulputate, in feugiat tortor consectetur. Nullam hendrerit rutrum commodo.</p> 
 
     <p class="end">Integer iaculis metus in nisl tristique, et feugiat ex ornare. Sed id ipsum arcu. Aliquam elit sapien, pulvinar feugiat condimentum et, tempus in neque. Nunc volutpat massa lectus, sed fermentum magna accumsan vitae. Sed vitae lectus a diam rhoncus 
 
     bibendum.</p> 
 
    </div> 
 
</body>

여기 jsfiddle있다. 당신이 나에게 확인을 보이는 무슨 -

희망이

출처

2017-05-18 20:52:02

전체 - 발췌 문장, 당신은 발췌 문장 창에서 효과를 얻지 않는다 –

세로 텍스트 메뉴에 적절한 CSS를 사용하려면 어떻게해야합니까?

답변

관련 문제