Menu icon Foundation
Grid or Nested Grid?

Following Problem,
I have to create a navigation with 5 boxes (equal width) and at the end of the row 1 smaller Box (see picture below).
My solution approach with 6 boxes (equal width) and editing the padding of each Box is not promising..

Can someone help me?

Dig

Here's my current code. It's not quite what I wanted, and I'm starting to get confused.

<div class="row navigation">
    <form>
        <div class="row">
            <div class="large-2 columns">
                <section>
                    <p>Feld 0</p>
                </section>
            </div>
            <div class="large-2 columns">
                <section>
                    <p>Field 1</p>
                </section>
            </div>
            <div class="large-2 columns">
                <section>
                    <p>Field 2</p>
                </section>
            </div>
            <div class="large-2 columns ">
                <section>
                    <p>Field 3</p>
                </section>
            </div>
            <div class="large-2  columns ">
                <section>
                    <p>Field 4</p>
                </section>
            </div>

            <div class="large-2 columns ">
                <section>
                    <section>
                        <p>Field 5</p>
                    </section>
                </section>
            </div>
        </div>
    </form>
</div>
            

         

Foundation 5cssgrid

Following Problem,
I have to create a navigation with 5 boxes (equal width) and at the end of the row 1 smaller Box (see picture below).
My solution approach with 6 boxes (equal width) and editing the padding of each Box is not promising..

Can someone help me?

Dig

Here's my current code. It's not quite what I wanted, and I'm starting to get confused.

<div class="row navigation">
    <form>
        <div class="row">
            <div class="large-2 columns">
                <section>
                    <p>Feld 0</p>
                </section>
            </div>
            <div class="large-2 columns">
                <section>
                    <p>Field 1</p>
                </section>
            </div>
            <div class="large-2 columns">
                <section>
                    <p>Field 2</p>
                </section>
            </div>
            <div class="large-2 columns ">
                <section>
                    <p>Field 3</p>
                </section>
            </div>
            <div class="large-2  columns ">
                <section>
                    <p>Field 4</p>
                </section>
            </div>

            <div class="large-2 columns ">
                <section>
                    <section>
                        <p>Field 5</p>
                    </section>
                </section>
            </div>
        </div>
    </form>
</div>
            

         
Preston McPeak almost 5 years ago

So right now you are making a navigation that is created with 5 columns in a row, why not try doing so with a top bar?

http://foundation.zurb.com/docs/components/topbar.html

Rafi Benkual almost 5 years ago

What are the sections for?

You can use a button group and add a smaller button on the end. Make sure to wrap it in a row.

Robocop almost 5 years ago

A button group solution sounds great.
I have already implemented this and it looks great as long as there are only buttons.

But the problem is a litte bit tricky:

At the end i need 5 select - elements with a simple dropdown-list and on the end of the row a small button.

My current standing:

<div class="row navigation">
    <form>
        <div class="row">
            <ul class="button-group [radius round]">
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li><a href="#" class="button"><select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select></a></li>
                <li style="width: 50px;"><a href="#" class="button win">B</a></li>
            </ul>

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

Robocop almost 5 years ago

Great. the button group solution works for me.

Thank you!

Here is my code.

<ul class="button-group">
                <li class="select "><select data-placeholder="BY PLACES">
                    <option value="all_places">ALL PLACES</option>
                    <option value=" "> PLACE 1</option>
                    <option value="">PLACE 2</option>
                    <option value="">PLACE 3</option>
                    <option value="">PLACE 4</option>
                    <option value="">PLACE 5</option>
                </select></li>

               <li class="btn_win"><a href="#" class="button win">Win</a></li>


</ul>