Jump to content


Photo

How Do I Create Buttons Which Change Lists?


  • Please log in to reply
5 replies to this topic

#1 Analytical Madness

Analytical Madness

    Forum Newcomer

  • Members
  • Pip
  • 14 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 19 September 2017 - 01:49 PM

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.

 

1930p5.jpg

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

 

2q18hzq.jpg

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.

 



#2 dilby

dilby

    Forum Newcomer

  • Members
  • Pip
  • 25 posts
  • Gender:Male
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 19 September 2017 - 04:11 PM

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.



#3 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,514 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 19 September 2017 - 04:41 PM

This is a funky way to do what you want: https://css-tricks.c...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



#4 Analytical Madness

Analytical Madness

    Forum Newcomer

  • Members
  • Pip
  • 14 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 20 September 2017 - 10:24 AM

This is a funky way to do what you want: https://css-tricks.c...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:

23fd709c3b.jpeg

 

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://analyticalmad...ub.htm#section1">Dragon Age</a>
    </p>
    <p>
      <a href="http://analyticalmad...ub.htm#section1">Dragon Ball</a>
    </p>
  </section>
    
  <section id="content2">
    <p>
    </p>
    <p>
    </p>
  </section>
    
  <section id="content3">
    <p>
      <a href="http://analyticalmad...tm#section1.htm">Psychological Analyses</a>
    </p>
    <p>
      <a href="http://analyticalmad...tm#section1.htm">Thematic Analyses</a>
    </p>
  </section>
    
</main>
 
<style type="text/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: # 888;
  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 by Analytical Madness, 20 September 2017 - 10:26 AM.


#5 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,514 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 20 September 2017 - 11:27 AM

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



#6 Analytical Madness

Analytical Madness

    Forum Newcomer

  • Members
  • Pip
  • 14 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 20 September 2017 - 11:31 AM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users