Кнопки: динамически настраивают размер в зависимости от доступного пространства - PullRequest
Новая
       2

Кнопки: динамически настраивают размер в зависимости от доступного пространства

0 голосов
/ 24 августа 2018

enter image description here

Таким образом, требование заключается в том, что вкладки или мастер здесь должны отображать полное имя по умолчанию, а неактивные должны уменьшаться в зависимости от доступного пространства справа. Есть идеи, как этого добиться?

enter image description here

По умолчанию кнопки будут иметь ширину: авто. Но когда нет. кнопок больше, и когда пространство справа начинает уменьшаться, неактивные должны уменьшаться.

1 Ответ

0 голосов
/ 24 августа 2018

Я думаю, вы выглядите примерно так: 

//Number of elemnts
let count = $('li').length;

//Width of each element
let width = 100 / count;
$('li').css('width', width + '%');

//Width of elements container (ul)
let ulWidth = parseFloat($("ul").css("width"));


for (let i = 0; i< count; i++) {

  $($('li')[i]).click(function() {
  
  	//Reset elements width
    $('li').css('width', 'auto');

    //Add active class to clicked element
    $('li').removeClass('active');
    $($('li')[i]).addClass('active');
    
    if ( $('li').hasClass('active') ) {
    
    	//Width of active element
      let activeWidth = parseFloat($("li.active").css("width"));
      let activeWidthPerc = (activeWidth * 100) / ulWidth;

      //Width of the rest of the elements
      let generalWidth = (100 - activeWidthPerc) / (count - 1);
      
      //Will only adapt when the active element is smaller than the rest of the elements
      if (activeWidthPerc < generalWidth) {
        
        $('li').css('width', width + '%');
        
      } else {
        
        $('li').css('width', generalWidth + '%'); //Set width to rest of the elements
        $('li.active').css('width', activeWidthPerc + '%'); //Set width to active element
        
      }
    
    }

  });

}
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

nav {
  width: 80%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

ul {
  width: 100%;
}

li {
  list-style: none;
  float: left;
  padding: 10px;
  text-align: center;
  background: #EEEEEE;
  cursor: pointer;
  color: #777;
  border-right: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

li:last-child {
  border-right: none;
}

p {
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

i {
  vertical-align: bottom;
  margin-right: 5px;
}

.active {
  background: #3C8CBD;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <nav>
    <ul>
      <!--Try to add more li elements-->
      <li>
        <i class="material-icons">home</i><p>Home</p>
      </li>
      <li>
        <i class="material-icons">airplanemode_active</i><p>Plane</p>
      </li>
      <li>
        <i class="material-icons">directions_car</i><p>Car</p>
      </li>
      <li>
        <i class="material-icons">people</i><p>People</p>
      </li>
    </ul>
  </nav>
</body>

Вы можете найти полный пример здесь https://codepen.io/Nacorga/pen/MqaLGK

Надеюсь, это вам поможет;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...