Show list of 6 in 6 items

Question

Show list of 6 in 6 items

Asked 9 years, 8 months ago

Viewed 242 times

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 arrow down, he should show one more listing with six items (even if it will show only one). According to this image: inserir a descrição da imagem aqui

That is, clicked on the arrow down, 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 pass from "top to bottom" and not from "left to right".

1

Your menu is dynamically mounted?

– Rafael Withoeft

2015/02/27 at 13:57
Make the 6 items add a fixed value, for example this menu has 800px, so each button would have a width of approximately 133px, and make the forward button move the div to 800px left/right.

– Diego Vieira

2015/02/27 at 13:57
Exactly, it will be manageable.

– Felipe Viero Goulart

2015/02/27 at 13:58
@Felipestoker, I believe you must have N elements UL, each with 1 to 6 LI, by default only the first will be displayed, and the arrows will change the visibility of the UL (paging)

– Tobias Mesquita

2015/02/27 at 14:07
@Tobymosque actually I will have one UL with N lis.

– Felipe Viero Goulart

2015/02/27 at 14:10
@Felipestoker something like that right? http://jsfiddle.net/bw48kft3/

– Diego Vieira

2015/02/27 at 14:13
@Diegovieira this, in fact, the only thing different, would be the menu do the vertical effect, going from top to bottom.

– Felipe Viero Goulart

2015/02/27 at 14:15
I found a solution for you, I’ll put as an answer;

– Rafael Withoeft

2015/02/27 at 14:15
Then it’s easier still, I’ll send the correction.

– Diego Vieira

2015/02/27 at 14:15
@Diegovieira ah, I changed to top: "-=200" and funfou :D

– Felipe Viero Goulart

2015/02/27 at 14:17
1

@Felipestoker just do so http://jsfiddle.net/bw48kft3/2/

– Diego Vieira

2015/02/27 at 14:17

Show 6 more comments

3 answers

4

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

Obviously it can do this dynamically and cause the jQuery take the amounts and make due accounts in the code.

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

Upshot

$(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>
<div id="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 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>
<link href="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>

3

Congratulations on the answer, but there is a problem in how to block when there are no more items, if there are more than 12 items it will lock the next ones, see http://jsfiddle.net/davh8bfb/, I believe it would be better to lock compared to the first element. Another problem is that each animate he goes up or down 2px plus leaving the menu out of alignment, I changed a few things as a suggestion if you want to include in the answer, see here http://jsfiddle.net/bhrrk3x9/2/

– abfurlan

2015/02/27 at 15:30
1

@abfurlan Thank you for warning about the bug, corrected and edited.

– Diego Vieira

2015/02/27 at 17:35

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Rafael Withoeft • **2,287** points · Answer 1 · 2015-02-27T14:18:06+00:00

For a pagination created dynamically and without numbering (next and previous button only) you can use Jquery Easy Paginate.

Follow a small example (You can change the css as you wish too, or even the plugin to generate according to the id class you would like): (http://jsfiddle.net/zgd56b1s/1/)

/* 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>
<script src="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>

Source and Documentation

Or you can also use the API Jquery Quick Pagination.

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"});
});

http://jsfiddle.net/4otefLc3/

References:

Quick Pagination
Github page
Examples

by Tobias Mesquita • **22,900** points · Answer 2 · 2015-02-27T14:30:24+00:00

Since you mentioned you’ll only have one 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 property data-page 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>
<script src="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="\/" />