Inspiring

Question

Code Only Works When Used In A Single Column Layout, Why?

Forum|Forum|3 years ago
June 13, 2022
4 replies
919 views

Hi Guys,

I've been messing with this menu sample for a while now. It works like a champ in a single column layout but will not "page" in any multi column layout. Flex no flex, it doesn't matter. Would someone please explain why?

https://codepen.io/ejsado/pen/gPVgVv

This topic has been closed for replies.

osgood_

Legend

@VShaneCurtis wrote:
Hi Guys,

I've been messing with this menu sample for a while now. It works like a champ in a single column layout but will not "page" in any multi column layout. Flex no flex, it doesn't matter. Would someone please explain why?
https://codepen.io/ejsado/pen/gPVgVv

Ok I see what you are using here, some experimental junk that doesn't really work in the wild as it stands. A lot of these online tutorials fall short simply because typical situations, where the solution may have to be used are not taken into consideration. In a lot of instances you can waste hours of time only to find tutorials don't work for your particular requirements, without extensive re-coding.

1) Because it uses css to 'target' the panels to show the code doesn't find the correct target panel when the panels are isolated in a 'seperate' container.

2) The tutorial uses absolute positioning for the panels, which is useless should you want to then place any content beneath the panels.

If you need it I can come up with a better solution using flex, grid and javascript, let me know.

VShaneCurtisAuthor

Inspiring

No the sample works as it is coded. I like the menu and have been trying to get it to work with my layout without success and couldn't figure out why because I didn't see anything that made the menu "target specific" other than the anchor names so I figured it would work but no joy. Your explanation helps explain things a little better. I like this menu concept. Don't know why it just caught my eye. I know there are probably issues with using it with respect to responsive mobile design concerns. Is the design adaptable? I am also playing with a much simpler concept that still looks pretty nice. My basic layout is coming along nicely I think. When I have a the rest of the pieces in place I would like to ask some of you to review it and give me your thoughts since you have all been so generous with your time. Thank you for your continued assistance.

osgood_

Legend

No the sample works as it is coded.

By @VShaneCurtis

I was under the impression you could NOT get it working in a multi-column layout, so does it work now or doesnt it? When you use css to do things like this the css selectors and their containers have to be in a specific order so the 'target' container can be found. If you have moved items around then that's likely why it doesnt work. I don't use css to do these kinds of complex procedures as it's a bit limited.

Is the design adaptable?

By @VShaneCurtis

It could be adaptable but on mobile one would usually use something like a hamburger to hide a top level menu so as to restrict the amount of space being used as mobile screens are limited for space. Depends what youre using it for. If its a tabbed area (which it should be used for) then I don't understand your use of multi-columns to split the component. This example is best used as a 1 column tabbed area component.

If youre using the navigation as a top level menu then its only good for a single page application which means the page doesnt reload and you get and maintain the nice animation effect behind the nav items.

Either way you'll run into issues if you wish to include any content below the tabbed panels so its NOT a great example UNLESS you are already are aware of this and have planned accordingly.

BenPleysier

Community Expert

That is because the layout is based on a width of max-width: 800px;, meaning that the menu is based on a non-responsive web site. If that is what you want, then go ahead and use the exact same code as shown in the CodePen.

In a previous post I showed you an alternative which only needs extra style rules to give it the same effect as well also turn it into a hamburger menu in smaller screen sizes.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

VShaneCurtisAuthor

Inspiring

I adjusted the code removing the width limitation and played around with it both in flex and non flex layouts. No joy. The menu moves but the content does not page based on the selected menu item. I see nothing in the code that makes it single colum specific. I am using the base code that you provided.

BenPleysier

Community Expert

Due to time restraints, I haven't tried more optimal style rules, just copied from your example. Personally I would have gone for a flexbox layout for the navigation bar. Anyhow, here goes:

<!doctype html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Layout using Flexbox">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
    html {
        background: #B1A7A0;
        color: #FCF9F4;
        font-family: "Open Sans", "Arial";
    }
    body {
        width: 80%;
        max-width: 1400px;
        margin: 30px auto;
        background: #3F3F3D;
        padding: 0 30px;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    main div {
        padding: 5px;
        margin: 5px;
    }
    a {
        color: #F29A77;
    }
    footer {
        padding: 20px;
        width: calc(100% + 20px);
        margin: 0 0 0 -30px;
        background: #2B2A28;
        border-bottom: 5px solid #EB4E01;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    }

    /* navigation bar */
    header input[name=css-tabs] {
        display: none;
    }
    #tabs {
        padding: 0 0 0 50px;
        width: calc(100% + 50px);
        margin-left: -50px;
        background: #2B2A28;
        height: 80px;
        border-bottom: 5px solid #EB4E01;
        box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    }
    #tabs::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -100;
        width: 100%;
        left: 0;
        margin-top: 16px;
        height: 80px;
        background: #2B2A28;
        border-bottom: 5px solid #EB4E01;
    }
    #tabs::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        height: 80px;
        width: 102px;
        background: #EB4E01;
        transition: transform 400ms;
    }
    #tabs label {
        position: relative;
        z-index: 100;
        display: block;
        float: left;
        font-size: 11px;
        text-transform: uppercase;
        text-align: center;
        width: 100px;
        height: 100%;
        border-right: 1px dotted #575654;
        cursor: pointer;
    }
    #tabs label:first-child {
        border-left: 1px dotted #575654;
    }
    #tabs label::before {
        content: "";
        display: block;
        height: 30px;
        width: 30px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        filter: invert(40%);
        margin: 10px auto;
    }
    #tab1::before {
        background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
    }
    #tab2::before {
        background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
    }
    #tab3::before {
        background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
    }
    #tab4::before {
        background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
    }
    #radio1:checked ~ #tabs #tab1::before, #radio2:checked ~ #tabs #tab2::before, #radio3:checked ~ #tabs #tab3::before, #radio4:checked ~ #tabs #tab4::before {
        filter: invert(100%);
    }
    #radio1:checked ~ #tabs::after {
        transform: translateX(0);
    }
    #radio2:checked ~ #tabs::after {
        transform: translateX(101px);
    }
    #radio3:checked ~ #tabs::after {
        transform: translateX(202px);
    }
    #radio4:checked ~ #tabs::after {
        transform: translateX(303px);
    }
    #radio1:checked ~ #content #content1, #radio2:checked ~ #content #content2, #radio3:checked ~ #content #content3, #radio4:checked ~ #content #content4 {
        transform: translateY(0);
        opacity: 1;
    }
    /* end navigation bar */
    @media screen and (min-width: 768px) {
        main {
            display: flex;
            flex: 1;
        }
        main div:nth-of-type(1) {
            flex: 2;
            order: 2;
        }
        main div:nth-of-type(2) {
            flex: 1;
            order: 1;
        }
        main div:nth-of-type(3) {
            flex: 1;
            order: 3;
        }
        footer {
            display: flex;
        }
        footer div {
            flex: 1;
            text-align: center;
        }
    }
</style>
</head>
<body>
    <header>
        <h1>Logo</h1>
        <input id="radio1" type="radio" name="css-tabs" checked>
        <input id="radio2" type="radio" name="css-tabs">
        <input id="radio3" type="radio" name="css-tabs">
        <input id="radio4" type="radio" name="css-tabs">
        <nav id="tabs">
            <label id="tab1" for="radio1">Home</label>
            <label id="tab2" for="radio2">Services</label>
            <label id="tab3" for="radio3">Locations</label>
            <label id="tab4" for="radio4">Profile</label>
        </nav>    
    </header>
    <main>
        <div>
            <article>
                <h2>All about Dribble</h2>
                <p>Short explanation</p>
                <section>
                    <h3>Based on this Dribbble</h3>
                    <p>
                        <a href="https://dribbble.com/shots/509024-Tabbed-Menu">
                            https://dribbble.com/shots/509024-Tabbed-Menu
                        </a>
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis adipiscing risus, porttitor viverra urna condimentum et. Donec vestibulum lacus vel dolor dictum pellentesque. Aliquam sodales sem quis urna condimentum, sit amet elementum magna semper.</p>
                </section>
                <section>
                    <h3>Something Clever</h3>
                    <p>Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante.</p>
                    <p>Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
                </section>
                <section>
                    <h3>Interesting Heading Text</h3>
                    <p>Fusce pulvinar porttitor dui, eget ultrices nulla tincidunt vel. Suspendisse faucibus lacinia tellus, et viverra ligula. Suspendisse eget ipsum auctor, congue metus vel, dictum erat. Aenean tristique euismod molestie. Nulla rutrum accumsan nisl, ac semper sapien tincidunt et. Praesent tortor risus, commodo et sagittis nec, aliquam quis augue. Aenean non elit elementum, tempor metus at, aliquam felis.</p>
                </section>
                <section>
                    <h3>Here Are Many Words</h3>
                    <p>Vivamus convallis lectus lobortis dapibus ultricies. Sed fringilla vitae velit id rutrum. Maecenas metus felis, congue ut ante vitae, porta cursus risus. Nulla facilisi. Praesent vel ligula et erat euismod luctus. Etiam scelerisque placerat dapibus. Vivamus a mauris gravida urna mattis accumsan.</p>
                    <p>Duis sagittis massa vel elit tincidunt, sed molestie lacus dictum. Mauris elementum, neque eu dapibus gravida, eros arcu euismod metus, vitae porttitor nibh elit at orci. Vestibulum laoreet id nulla sit amet mattis.</p>
                </section>
            </article>
        </div> 
        <div>
            <article>
                <h3>First Left Article</h3>
            </article>
            <article>
                <h3>Second Left Article</h3>
            </article>
            <article>
                <h3>Third Left Article</h3>
            </article>        
        </div>
        <div>
            <article>
                <h3>First Right Article</h3>
            </article>
            <article>
                <h3>Second Right Article</h3>
            </article>
            <article>
                <h3>Third Right Article</h3>
            </article>
        </div>
    </main>
    <footer>
        <div>
            left footer
        </div>
        <div>
            center footer
        </div>
        <div>
            right footer
        </div>
    </footer>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Answers to layout questions are contained in your code, not the code on CodePen.

Tabbed Panels inside columns with Bootstrap which uses Flexbox.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-light bg-info main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Something</a>
<a class="dropdown-item" href="#">Something More</a>
<a class="dropdown-item" href="#">Something Else</a>
<a class="dropdown-item" href="#">Some Other Thing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<!--BRAND-->
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>
</li>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container-fluid">
<section class="row">
<div class="col-6">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt asperiores maiores ipsam soluta excepturi officiis temporibus et tempora odio nam natus, obcaecati veritatis saepe. Culpa numquam pariatur a fuga qui!</p>
</div>
<!--column spacer-->
<div class="col-1 border-left border-right bg-light">
</div>
<div class="col-5">
<!--TABBED PANELS-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab">About</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="map-tab" data-toggle="tab" href="#map" role="tab" aria-controls="profile" aria-selected="false">Map</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab">FAQ</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel">About lorem ipsum dolor...</div>
<div class="tab-pane fade" id="map" role="tabpanel">Google Map lorem ipsum dolor...</div>
<div class="tab-pane fade" id="faq" role="tabpanel">FAQ lorem ipsum dolor...</div>
</div>
</div>
</section>
</main>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

osgood_

Legend

I don't think we know what you mean by 'will not page' in any multi column layout?

Can you post your code here as that will give us a better idea of what you are trying to do?

I'll check back tomorrow as its now late here in the UK.

VShaneCurtisAuthor

Inspiring

by "will not page" I mean that the correct page content does not display based on the menu item selected.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded