кнопка с богатым содержанием свернулась в значок и показывает содержимое вкладки навигации - PullRequest
Новая
       1

кнопка с богатым содержанием свернулась в значок и показывает содержимое вкладки навигации

0 голосов
/ 20 сентября 2018

Я пытаюсь добиться этого "эффекта" или как его там называют.Где у меня есть богатые по содержанию вертикально выровненные кнопки (со значком, текстом заголовка и обычным текстом).

Затем, когда кнопка нажата, Новый набор вертикально выровненных кнопок (со значком и обычным текстом) появилось в качестве новых параметров.

Затем, когда нажимается «подкнопка», появляется область содержимого.

Я пробовал «вертикально выровненные вкладки с начальной загрузкой 4», но я застрял с:

  • показывает ТОЛЬКО основные кнопки с полным содержимым
  • показывает ТОЛЬКО значок для главной кнопки (где остальное содержимое кнопки скрывается после нажатия) + и + субкнопки
  • возвращаются в нормальное состояние, когда только основные кнопки отображаются с полным содержимым

, как показано на рисунке ниже

Goal

Я использую: Bootstrap 4 + Я немного знаю JS

Пожалуйста, помогите мне с этим или направьте меня туда, где я мог бы получить ответ.Спасибо

~ обновление: вот ссылка на очень простые "вертикальные таблетки", над которыми я работаю https://codepen.io/bixet/pen/yxGrLO

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Main<br>Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Main<br>Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Main<br>Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Main<br>Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">

        <div class="row">

          <div class="col-4">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-subhome-tab" data-toggle="pill" href="#v-pills-subhome" role="tab" aria-controls="v-pills-subhome" aria-selected="true">SubHome</a>
      <a class="nav-link" id="v-pills-subprofile-tab" data-toggle="pill" href="#v-pills-subprofile" role="tab" aria-controls="v-pills-subprofile" aria-selected="false">SubProfile</a>
    </div>
  </div>

<div class="col-4">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-subhome" role="tabpanel" aria-labelledby="v-pills-subhome-tab">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-subprofile" role="tabpanel" aria-labelledby="v-pills-subprofile-tab">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>      

    </div>
  </div>

        </div>

      </div>

      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">

        <div class="row">

          <div class="col-4">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-subhome2-tab" data-toggle="pill" href="#v-pills-subhome2" role="tab" aria-controls="v-pills-subhome2" aria-selected="true">SubHome</a>
      <a class="nav-link" id="v-pills-subprofile2-tab" data-toggle="pill" href="#v-pills-subprofile2" role="tab" aria-controls="v-pills-subprofile2" aria-selected="false">SubProfile</a>
    </div>
  </div>

<div class="col-4">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-subhome2" role="tabpanel" aria-labelledby="v-pills-subhome2-tab">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-subprofile2" role="tabpanel" aria-labelledby="v-pills-subprofile2-tab">2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>      

    </div>
  </div>

        </div>

      </div>

      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.</div>

    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 23 сентября 2018

У меня есть следующее решение, которое использует чистый CSS и некоторый код Javascript: (См. Это fiddle ) для хорошего предварительного просмотра 

let menuItems =document.querySelectorAll(".y-menu-item");
menuItems.forEach((item)=>{
    item.addEventListener("click", function(event){
        document.querySelectorAll(".y-texts-wrapper,.y-menu-sublevel-1").forEach((txtw)=>{
            txtw.style.display='none';
        });
        
        item.children[2].style.display='block'
        
    })
})

/********************** */

let subMenuItems=document.querySelectorAll('.y-menu-item-sublevel-1');


subMenuItems.forEach((subItem)=>{
    subItem.addEventListener("click",function(){
      
        document.querySelectorAll(".y-sub-l1-ht,.y-content").forEach((ht)=>{
            ht.style.display='none';
        });
        subItem.children[2].style.display='block'
     
    });
})
body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: Montserrat,sans-serif;
    color:#333;
}
p{
    font-size: 10pt;
}
.y-menu{
    padding: 20px;
    height: 80%;
    display: flex;
    flex-direction: column;
    
    justify-content: space-between;
    align-items: flex-start;
   
}

.y-menu-item{
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 20px;
    margin: 5px 0;
    border-radius:5px;
    /* background: #eee; */
    cursor: pointer;

}



.y-icon{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background: #4E0BEF;
}

.y-s-icon{
    width: 40px;
    height: 40px;
    border-radius: 5px;

}
.y-texts-wrapper{
    margin-left: 20px;
    /* display: none; */
}

.y-normaltxt{
    width: 200px;

}
.y-menu-sublevel-1{
    display: none;
    position: absolute;
    margin-left: 84px;
    margin-top: 47px;
}

.y-menu-item-sublevel-1{
    display: flex;
    flex-direction:row;
    align-items: center;
    margin:0 0 10px 10px ;
}

@keyframes anim1{
    0% {width: 0;height: 0;opacity: 0;}
    50% {width: 250px;height: 250px;opacity: .5;}
    100% {width: 500px;height: 500px;opacity: 1;}
    
}

.y-content{
    width: 500px;
    height: 500px;
    top:20px;
    left:180px;
    padding:20px;
    color: #fff;
    background: #4E0BEF;
    position: fixed;
    display:none;
    text-align: center;
    animation: anim1 .1s ;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menu</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="main-menu" class="y-menu">
        <div class="y-menu-item" >
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed mollitia et labore sunt distinctio laboriosam numquam laborum doloribus ex animi at amet maiores, quaerat temporibus, exercitationem minima repellat quos eligendi!</div>
                    
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>

                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>

                </div>                    
                
            </div>
            
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
            </div>
            
            
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
                
            </div>
        </div>
        <div class="y-menu-item">
            <div class="y-icon"></div>
            <div class="y-texts-wrapper">
                <h4 class="y-headtxt">Some head text</h4>
                <p class="y-normaltxt">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
                
            </div>
            <div class="y-menu-sublevel-1">
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div> 
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>   
                <div class="y-menu-item-sublevel-1">
                    <div class="y-icon y-s-icon"></div>
                    <h4 class="y-headtxt y-sub-l1-ht">Some head text 1</h4>
                    <div class="y-content">The main content</div>
                </div>                    
                
            </div>
        </div>
        
        
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...