LUCIA

Помогите, пожалуйста с версткой меню личного кабинета

Recommended Posts

Здравствуйте, пожалуйста, помогите, как сверстать такое меню? При переключении по страницам личного кабинета вкладка обозначается впуклостью 🙂 с кругом. Нужно в стилях играть с осями ?

Аннотация 2019-10-28 191700.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By varanika
      Люди, вот скоро крыша съедет. Пытаюсь добиться красоты вкладок. Важно, чтобы при активации каждой вкладки текст ее шапки приобретал тот же цвет, что и линия подчеркивания, а выходит глюк и первая вкладка навечно остается в цвете #333....
       
       
      Код
        <div class="m-vibor">               <br id="tab2"/>               <br id="tab3"/>               <a href="#tab1" class="m-vibor-menu">Категории</a>               <a href="#tab2" class="m-vibor-menu">Гамма</a>               <a href="#tab3" class="m-vibor-menu">Полезное</a>               <div>                   <select class="m-category-menu">                      Текст 1                   </select>             </div>               <div>                      Текст 2                    </div>              <div>               Текст 3           </div>         </div>       CSS    #tab2, #tab3 {     position: fixed; } .m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor > div {     padding: 0px 19px; } .m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor #tab1:target ~ a:nth-of-type(1){     border-bottom: 1px solid #777; }   .m-vibor > a {     line-height: 28px;     text-decoration: none; } #tab2, #tab3, .m-vibor > div, .m-vibor #tab2:target ~ div:nth-of-type(1), .m-vibor #tab3:target ~ div:nth-of-type(1) {     display: none;     } .m-vibor > div:nth-of-type(1), .m-vibor #tab2:target ~ div:nth-of-type(2), .m-vibor #tab3:target ~ div:nth-of-type(3) {     display: block; }     И проблемная часть:     .m-vibor > a:nth-of-type(1), .m-vibor #tab2:target ~ a:nth-of-type(2), .m-vibor #tab3:target ~ a:nth-of-type(3) {       border-bottom: 1px solid #333;       color: #333;   } .m-vibor a:hover, .m-vibor a:active, .m-vibor a:target {     color: #333;     border-bottom: 1px solid #333; }     Ну почему Категории остаются темнее, а их подчеркивание меняется???  
  • Member Statistics

    46,528
    Total Members
    3,128
    Most Online
    SANTIMEL
    Newest Member
    SANTIMEL
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.