Show list of 6 in 6 items

Navigation
6

I have a menu listing with the following HTML: 

.menu ul {
  height: 115px;
  width: 960x;
}
.menu li {
  font: 900 22px/22px"open sans";
  color: #16232e;
  width: 160px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 45px;
  cursor: pointer;
}
<div class="menu">
  <ul>

    <li>
      <a href="/paginaSYS">
        <h4>tituloMenuSYS</h4>
      </a>
    </li>
    <li>
      <a href="/paginaSYS">
        <h4>tituloMenuSYS</h4>
      </a>
    </li>
    <li>
      <a href="/paginaSYS">
        <h4>tituloMenuSYS</h4>
      </a>
    </li>
    <li>
      <a href="/paginaSYS">
        <h4>tituloMenuSYS</h4>
      </a>
    </li>
    <li>
      <a href="/paginaSYS">
        <h4>tituloMenuSYS</h4>
      </a>
    </li>

  </ul>
</div>

There are six items, what the designer asked me was, when a seventh item is registered, and the user clicks the down arrow, it should show another listing with six items (even if it shows only one). According to this image:

That is, you clicked the down arrow, it shows the next listing with six items. I tried to use the Jcaroulsellite with the vertical, but it did not roll, is there any other solution? The effect has to be to move from top to bottom rather than from left to right.

    
asked by anonymous 27.02.2015 / 14:52

3 answers

4

The idea is to make each menu option ( <li> ) a fixed size for both width and height.

Obviously, you can dynamically do this and get the jQuery to take the values and make the correct accounts in the code.

In this example our option must have 113x40px , and finally we set our menu with a size of 800px .

Result 

$(function(){
    var menu = $('#menu ul');
    
    $('.prox').click(function(){
        menu.animate({
            top: "-=40"
        }, 100);
    });
    
    $('.ante').click(function(){
        menu.animate({
            top: "+=40"
        }, 100);
    });
});
#menu {
    width:800px;
    overflow:hidden;
    position:relative;
    height:40px;
    border:1px solid #000;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
}

ul li {
    float:left;
    width:113px;
    text-align:center;
    padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="menu">
    <ul>
        <li>MENU 1</li>
        <li>MENU 2</li>
        <li>MENU 3</li>
        <li>MENU 4</li>
        <li>MENU 5</li>
        <li>MENU 6</li>
        <li>MENU 7</li>
        <li>MENU 8</li>
    </ul>
</div>

<button class='prox'>Proximo</button>
<button class='ante'>Anterior</button>

Just implement according to your requirements.

UPDATE 2

I've added some criteria to crash when there are no more options. 

$(function(){
    var menu = $('#menu ul');
    var pos = 40;
    var limit;
    
    //Adicionar dinamicamente
    for(i = 1; i <= 60; i++)
        menu.append('<li>Menu #'+i+'</li>');
    
    limit = menu.height();
    
    $('.prox').click(function(){
        if(pos >= 0 && pos < limit) {
            menu.animate({
                top: "-=40"
            }, 100);
            
            pos += 40;
        }
    });
    
    $('.ante').click(function(){
        if(pos > 40 && pos <= limit) {
            menu.animate({
                top: "+=40"
            }, 100);
            
            pos -= 40;
        }
    });
});
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#menu {
    width:610px;
    overflow:hidden;
    position:relative;
    height:40px;
    border:1px solid #000;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
}

ul li {
    float:left;
    width:100px;
    text-align:center;
    padding:10px;
    height:40px;
    margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="menu">
    <ul>
         
    </ul>
</div>

<div class="arrows">
    <button class='ante'>
        <i class="fa fa-chevron-up"></i>    
    </button>
    <button class='prox'>
        <i class="fa fa-chevron-down"></i>
    </button>
</div>
    
27.02.2015 / 15:21
3

For a dynamically created page with no numbering (next and previous button only) you can use Jquery Easy Paginate .

Here is a small example (You can change the css as you wish too, or even the plugin to generate according to the class id's you would like): ( link ) 

/* http://cssglobe.com/lab/easypaginate/js/easypaginate.min.js */
$(document).ready(function() {
    $('ul#items').easyPaginate({
      step: 3,
      numeric: false
    });
    $('li.prev').html('').addClass('glyphicon glyphicon-chevron-down');
    $('li.next').html('').addClass('glyphicon glyphicon-chevron-up');
});
ul#items {
  margin: 1em 0;
  width: auto;
  height: auto;
  overflow: hidden;
}
ul#items li {
  list-style: none;
  float: left;
  height: auto;
  overflow: hidden;
  padding: 5px;
  margin: 3px;
  background: #FF5677;
  color: #fff;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 1px 1px #777;
  -webkit-box-shadow: 0 1px 1px #777;
  box-shadow: 0 1px 1px #777;
  color: #000;
}
ul#items li:hover {
  color: #333;
}
ol#pagination li {
  padding: 0 5px 0 5px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cssglobe.com/lab/easypaginate/js/easypaginate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

Font and Documentation

Or you can also use the Jquery Quick Pagination API.

HTML 

<ul id="menu">
    <li> <a href="/paginaSYS">
      <h4>tituloMenuSYS1</h4>
    </a>

    </li>
    <li> <a href="/paginaSYS">
      <h4>tituloMenuSYS2</h4>
    </a>

    </li>
    <li> <a href="/paginaSYS">
      <h4>tituloMenuSYS3</h4>
    </a>

    </li>
    <li> <a href="/paginaSYS">
      <h4>tituloMenuSYS4</h4>
    </a>

    </li>
    <li> <a href="/paginaSYS">
      <h4>tituloMenuSYS5</h4>
    </a>

    </li>
</ul>

JAVASCRIPT example: 

$(document).ready(function (e) {
    $("ul#menu").quickPagination({pageSize:"3"});
});

link

References:

Quick Pagination
GitHub page Examples

    
27.02.2015 / 15:18
2

Since you mentioned that you will only have a UL with N (several) LI , then you will have to have some mechanism to control which LI will be visible.

The example below will use the data-page property with es 

var page = 1;
var pageCount = 3
var btUp = $("#btUp");
var btDown = $("#btDown");

btDown.click(function () {
    var pageAtual = $(".menu li[data-page=" + page + "]");
    page = page + 1;
    var pageProx = $(".menu li[data-page=" + page + "]");
    
    console.log(pageAtual);
    
    pageAtual.toggleClass("hide");
    pageProx.toggleClass("hide");
    
    btUp.prop("disabled", false);
    if (page == pageCount) {
        btDown.prop("disabled", true);
    }
});

btUp.click(function () {
    var pageAtual = $(".menu li[data-page='" + page + "']");
    page = page - 1;
    var pageProx = $(".menu li[data-page='" + page + "']");
    
    pageAtual.toggleClass("hide");
    pageProx.toggleClass("hide");
    
    btDown.prop("disabled", false);
    if (page == 1) {
        btUp.prop("disabled", true);
    }
});
ul {
    list-style-type: none;    
}
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://cdn.foundation5.zurb.com/foundation.js"></script>
<div class="menu">
  <ul class="row">
    <li class="small-2 columns" data-page="1">
      <a href="/pagina01">
        <h4>Pagina 01</h4>
      </a>
    </li>
    <li class="small-2 columns" data-page="1">
      <a href="/pagina02">
        <h4>Pagina 02</h4>
      </a>
    </li>
    <li class="small-2 columns" data-page="1">
      <a href="/pagina03">
        <h4>Pagina 03</h4>
      </a>
    </li>
    <li class="small-2 columns" data-page="1">
      <a href="/pagina04">
        <h4>Pagina 04</h4>
      </a>
    </li>
    <li class="small-2 columns" data-page="1">
      <a href="/pagina05">
        <h4>Pagina 05</h4>
      </a>
    </li>
    <li class="small-2 columns" data-page="1">
      <a href="/pagina06">
        <h4>Pagina 06</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina07">
        <h4>Pagina 07</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina08">
        <h4>Pagina 08</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina09">
        <h4>Pagina 09</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina10">
        <h4>Pagina 10</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina11">
        <h4>Pagina 11</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="2">
      <a href="/pagina12">
        <h4>Pagina 12</h4>
      </a>
    </li>
      <li class="small-2 columns hide" data-page="3">
      <a href="/pagina13">
        <h4>Pagina 13</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="3">
      <a href="/pagina14">
        <h4>Pagina 14</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="3">
      <a href="/pagina15">
        <h4>Pagina 15</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="3">
      <a href="/pagina16">
        <h4>Pagina 16</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="3">
      <a href="/pagina17">
        <h4>Pagina 17</h4>
      </a>
    </li>
    <li class="small-2 columns hide" data-page="3">
      <a href="/pagina18">
        <h4>Pagina 18</h4>
      </a>
    </li>
  </ul>
</div>
    
<input id="btUp" class="button small" type="button" value="/\" disabled="disabled" />
<input id="btDown" class="button small" type="button" value="\/" />
    
27.02.2015 / 15:30
.gitignore delete all folders except one What size of a large considerable query?