Photoshop Question posted in
The official user guide can be found here.

Toggle Content via Menu (Pure HTML and CSS) – Photoshop

Say I have three div’s which contain unique content;

  • div1 = Is a Photoshop guide
  • div2 = Contains a gallery of images
  • div3 = Lists personal contact details

When my page loads they all need to be hidden;

  • div1 = hidden
  • div2 = hidden
  • div3 = hidden

They are also laid ontop of one another (occupy the same space having the same width, but varying heights).

There’s a horizontal menu above these divs that trigger their visbilities;

| View 1 | View 2 | View 3 |

If a user clicks ‘View 1’, div1 becomes visible;

  • div1 = visible
  • div2 = hidden
  • div3 = hidden

If a user clicks ‘View 2’, only div2 is visible;

  • div1 = hidden
  • div2 = visible
  • div3 = hidden

And the same for clicking ‘View 3’;

  • div1 = hidden
  • div2 = hidden
  • div3 = visible

My current solution is available via JSFiddle here;

http://jsfiddle.net/t6cU4/

only using check-boxes and opacity settings with <div>, <label> and <input>

How do I go about this using only HTML and CSS (no scripts) in the smallest way possible?

  • What I’m trying to achieve is a singular page design, where no external pages are used
  • A background (or active) style would also be of use for the menu items (so the user knows which div they are viewing)
  • The problem with the current solution is that the labels and have no selection effect and the divs do not overlap (they appear below each other like a list inside of overlapping). The logo also disappears along with item 3 when clicking a label
Tags:

2

Answers


  1. 0

    Try different CSS menus. You can grab a lot from google.
    Here are some samples collected from web:

    http://www.smashingapps.com/2013/02/18/48-free-dropdown-menu-in-html5-and-css3.html

http://css3menu.com/enterprise-green.html
    Login or Signup to reply.
  2. 0

    The trick is add a <label> tag after a <input type="checkbox"> and in CSS, add the selector :checked for the input, like a trigger.

    HTML

    <input class="trigger" id="1" type="checkbox">
<label for="1">Click me</label>
<div>Surprise!</div>

<br><br>

<input class="trigger" id="2" type="checkbox">
<label for="2">Click me too</label>
<div>Surprise again!</div>

    CSS

    .trigger + label + div /*This selects the div that is placed after a label that's after a element with 'trigger' class*/
{
    display:none; /*hiding the element*/
}

.trigger /*This selects a element with class 'trigger'*/
{
    display:none; /*hiding the element*/
}

.trigger:checked + label + div /*This selects the div that is placed after a label that's after a CHECKED input with class 'trigger'*/
{
    display:block; /*showing the element*/
}

    See Working Fiddle

    Or

    See Fiddle With Explanations

    07.30.2014 – UPDATE:

    You said you want the divs appearing without any menu deformations, right? Try to put all <div>‘s in the bottom and put every corresponding <input> before that. The labels stay on top.

    Just like that:

    <label for="1">Click me</label>

<label for="2">Click me too</label>

<br/><br/>

<input class="trigger" id="1" type="checkbox"/>
<div class="cont"><strong>1st Title</strong><br/>And 1st content.</div>

<input class="trigger" id="2" type="checkbox"/>
<div class="cont"><strong>2nd Title</strong><br/>And 2nd content.</div>

    and in CSS:

    .trigger:checked + div {
    display:block;
}

    -> See new Fiddle <-

    (Sorry if my english is bad)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search