Hey everyone,

 

I'm creating a site (using a program called OpenElement) and I want to create a menu with three buttons which, when pressed, change the content of a small list/accordion menu on the page. I don't want to have to have to simply link to a different url for this.

 

It's a bit hard to explain my intent in detail with only words, so I thought I'd illustrate it through pictures.

 

This first image would be what the menu would look like by default or when the "Title" button has been pressed.

 

The second image is supposed to be the menu that appears when you press the "Author" button.

 

So does anyone have any idea how I can accomplish this? Fair warning, I'm a novice at using HTML and CSS. My only experience with coding languages before I started this site was with Papyrus and similar ones for modding video games like Skyrim.

 

PS: I'm sorry if I posted this in the wrong place or something like that, I'm quite new here.

 

To help point you in the right direction, you might want to read about tabular content. It might be worth you learning the basics of how that works.

This is a funky way to do what you want: https://css-tricks.com/functional-css-tabs-revisited/

 

Or you do some animations with a teeny bit of jquery: https://codepen.io/bramus/pen/LasEu

 

This is nice method as well: https://codepen.io/oknoblich/pen/tfjFl

This is a funky way to do what you want: https://css-tricks.com/functional-css-tabs-revisited/

 

Or you do some animations with a teeny bit of jquery: https://codepen.io/bramus/pen/LasEu

 

This is nice method as well: https://codepen.io/oknoblich/pen/tfjFl

 

I tried the second method and it did work (so thanks already). But I don't know how I can make it look the way I want. I know how to change the various colours involved and get a frame around it and whatnot. But I'm not sure how I can add the rounded "Sort by" piece or how I can move the buttons to be inside of the frame rather than inside of the box itself. Any idea on that? Is there a way I can use the png image I created (the one I posted in my original post) in this?

 

Here's a picture of what it currently looks like:

 

And here's the code currently;

<main>

<input id="tab1" type="radio" name="tabs" checked>

<label for="tab1">Title</label>

<input id="tab2" type="radio" name="tabs">

<label for="tab2">Author</label>

<input id="tab3" type="radio" name="tabs">

<label for="tab3">Subject</label>

<section id="content1">

<p>

<a href="http://analyticalmadness.com/Dragon%20Age%20Hub.htm#section1">Dragon Age</a>

</p>

<p>

<a href="http://analyticalmadness.com/Dragon%20Ball%20Hub.htm#section1">Dragon Ball</a>

</p>

</section>

<section id="content2">

<p>

<a href="http://analyticalmadness.com/Analyze.htm">Analyze</a>

</p>

<p>

<a href="http://analyticalmadness.com/Maddy.htm">Maddy</a>

</p>

</section>

<section id="content3">

<p>

<a href="http://analyticalmadness.com/Psychological%20Analyses%20Hub.htm#section1.htm">Psychological Analyses</a>

</p>

<p>

<a href="http://analyticalmadness.com/Thematic%20Analyses%20Hub.htm#section1.htm">Thematic Analyses</a>

</p>

</section>

</main>

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*, *:before, *:after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html, body {

height: 100vh;

}

body {

font: 14px/1 'Open Sans', sans-serif;

color: #555;

background: #eee;

}

h1 {

padding: 50px 0;

font-weight: 400;

text-align: center;

}

p {

margin: 0 0 2px;

line-height: 1.5;

background: #fff;

}

main {

min-width: 320px;

max-width: 600px;

padding: 50px;

margin: 0 auto;

background: #fff;

border-color: #000000;

border-style: solid;

border-width: 6px;

}

section {

display: none;

padding: 20px 0 0;

border-top: 1px solid #ddd;

}

input {

display: none;

}

label {

display: inline-block;

margin: 0 0 -1px;

padding: 15px 25px;

font-weight: 600;

text-align: center;

color: #bbb;

border: 1px solid transparent;

}

label:before {

font-family: fontawesome;

font-weight: normal;

margin-right: 10px;

background: solid;

background-color: #000000;

}

label:hover {

color: # ;

cursor: pointer;

background-color: #fff;

}

input:checked + label {

color: #fff;

background-color: #808080;

}

#tab1:checked ~ #content1,

#tab2:checked ~ #content2,

#tab3:checked ~ #content3,

#tab4:checked ~ #content4 {

display: block;

}

@media screen and (max-width: 650px) {

label {

font-size: 0;

}

label:before {

margin: 0;

font-size: 18px;

}

}

@media screen and (max-width: 400px) {

label {

padding: 15px;

}

}

</style>

Edited September 20, 20179 yr by Analytical Madness

It's all done with CSS. You don't need to use an image.

 

What you do is edit each styles until you have the layout you want. Without seeing the live site it's not easy to advise on where to begin

It's all done with CSS. You don't need to use an image.

 

What you do is edit each styles until you have the layout you want. Without seeing the live site it's not easy to advise on where to begin

 

Well, I'm mostly unsure how to place the tabs themselves in a different place with CSS or how to add the non-interactive and rounded "Sort By" you can see in the original image. So being able to just use the original image sounds like it'd make things much easier.

 

Here's the page it's currently on if that would help: http://analyticalmadness.com/Temp.htm.