Выпадающее меню с выравниванием по левому краю во всю ширину

Я пытаюсь создать раскрывающееся меню с выравниванием по левому краю во всю ширину (используя Semantic UI)

Прямо сейчас меню наследует ту же ширину и расположение, что и его родительский элемент div. Я хотел бы, чтобы «дочернее» меню занимало всю ширину и всегда было выровнено по левому краю. Я подготовил скрипт JS, который показывает текущее поведение, которое показывает, что дочернее меню выравнивается с родительским div, а не на всю ширину.

HTML:

<html>
    <head>

      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css" />

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>

    </head>

    <body>        
          <div id="nav_items"> 
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 1</div>
              <ul class="menu">
                <li>Item One 1</li>
                <li>Item Two 1</li>
                <li>Item Three 1</li>
                <li>Item Four 1</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 2</div>
              <ul class="menu">
                <li>Item One 2</li>
                <li>Item Two 2</li>
                <li>Item Three 2</li>
                <li>Item Four 2</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 3</div>
              <ul class="menu">
                <li>Item One 3</li>
                <li>Item Two 3</li>
                <li>Item Three 3</li>
                <li>Item Four 3</li>
              </ul>
            </div>
          </div>

    </body>
</html>

CSS:

body {
  background: #f6f5f4; 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;
}

/*------------ NAV-ITEMS STYLE ------------*/  
#nav_items {
  position: relative;
  width: 100%;
  display: block;
  float: left;
  list-style-type: none;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1); 
}

#nav_items .ui.dropdown {
  width: 33.33%;
  float: left;
  position: relative;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

#nav_items .ui.dropdown .title {
  color: #000;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
}


/*------------ NAV-ITEMS MENU STYLE ------------*/
#nav_items .ui.dropdown .menu {
  position: absolute;
  top: 60px;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

#nav_items .ui.dropdown .menu li {
   list-style-type: none;
  text-align:left; 
  float: left;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  min-width: 100% !important; 
  text-indent: 20px;
}

#nav_items .ui.pointing.dropdown .menu:after {
  display: none;
}

JS:

$(document).ready(function(){

  $('#nav_items .dropdown')
    .dropdown({
  });

});

Ссылка на скрипт JS:

https://jsfiddle.net/svansoeren/ja4uy405/13/

Спасибо!


css semantic-ui
person Community    schedule 06.07.2015    source источник
comment
как это? jsfiddle.net/ja4uy405/9 добавлено отображение: блок; ширина: 100%; в #nav_items .ui.dropdown{}   -  person Liquidchrome    schedule 06.07.2015
comment
^ Думаю, Стивен хочет, чтобы подменю было на всю ширину, а не на 33%.   -  person m4n0    schedule 06.07.2015
comment
Да, элементы меню должны остаться на 33,33%, а элементы подменю должны стать на 100%   -  person    schedule 06.07.2015
comment
Я думаю, вам придется переставить элементы вашего меню так, чтобы они были параллельны родительскому выпадающему уровню. Пока они являются дочерними элементами раскрывающегося списка родителей, они будут оставаться в пределах ширины родителей.   -  person Liquidchrome    schedule 06.07.2015
comment
Спасибо. Liquidchrome jsfiddle.net/svansoeren/b7xzLyyp работает отлично.   -  person    schedule 07.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

https://jsfiddle.net/blaird/ja4uy405/10/

Как насчет исправления раскрывающегося списка, чтобы вывести его из потока:

#nav_items .ui.dropdown .menu {
  position: fixed;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}
person Barbara Laird    schedule 06.07.2015
comment
Спасибо за предложение, проблема в том, что если я исправлю это, оно останется активным и на экране, даже когда пользователь прокручивает, что не является предполагаемым поведением. - person ; 06.07.2015