縦書きテキストメニューに適切な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

を助け

・ホープ（元hereを試してみてください）。 –

@delizade私は答えを投稿しました。それはうまく動作するようです。見てみましょう。その後、http：//www.stackoverflow/help/accepted-answerにアクセスして、あなたの担当者がどのように機能するのかを確認してください！（一見、あなたは3年以上にわたりそのサイトにいましたか？..hh .. ..ホバー+クリック..それほど難しくありません） –

あるコードのように、少量のためにここにCSSの膨大な量があるようです。ほとんどを取り除くための鍵は、あなたのCSSにtransform-originを追加することです。それでは、詰め物を調整するだけで（その番号をどうやって得たのですか？）、位置を固定するなどです。

絶対位置を控えめに使用してください。ちょっとヒントです。レスポンシブなデザインになります。

セクションに他のテキストを追加する方法を示す別の段落を追加しました。ここjsfiddleがあります

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>

：

は、次のコードを試してみてください。何を持っていることは私にはOKになります - これは、あなたが「正しいCSS」とはどういう意味ですか

出典

2017-05-18 20:52:02

スニペットをフルページで表示すると、スニペットウィンドウから効果が得られません –

縦書きテキストメニューに適切なCSSを使用するにはどうすればよいですか？

答えて

関連する問題