Accordian menu
Autor: P. S
Visitado 2368,
Followers 1,
Compartido 0
Hello,
Is there a way to create an accordian type menu in X5? I have tried ssome code, then displays horizontal bars with titles, when clicked the bar drops down with the text, and has a +/- sign.
The code works, but the stly does not look great and as i don't know how to change this easily, it would be good to do something similar within the software.
I noticed in the template "Easy Tech" within the technology group, under the "Partners" tab you can hover over a + and get what looks like a showbox.
How is this done?
Regards
Peter
Publicado en
Hello Peter
I have made an example here : http://www.energifremtiden.dk/c4d/accordion-3---copy.html
And another here : http://www.brammingegnsmuseum.dk/info.html
Try to hover the maps to the left, and the icons on the accordion to the right.
I have the accordion here : http://www.energifremtiden.dk/c4d/accordion---2.html
Is this a kind of what you mean ?
If - then I can support you with the code for one of the accordions in the last example.
Kind regards
John S.
Autor
Hello John,
This is exactly what i am looking at.
However, i wondered if it could be created within X5 or how the showbox type object worked in their template.
I was really trying to keep away from the HTML options.
Your example looks great, and the links on map to the menu is very good.
Thanks
Peter
Hello Peter
Here is some code for the accordion. The code should be put in a html-object. The first part in the HTML-code tab and the styling in the expert tab - so - you could say it is created within X5.
This code in HTML code :
------------------------------------------------------------------------------------------------------------------------
<div class="half">
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Trained guards</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Response management</label>
<div class="tab-content">
<p>Lorem ipsum doipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciipsum dolor sit amet, consectetur adipisicing elit, sed dog elit, sed do eised do eiit, nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="http://www.john-schwartz.dk/files/test15.jpg" align="left" style="width:150px;height:100px;">
<p>Lorem ipsum dolor solore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="http://www.john-schwartz.dk/files/test15.jpg" align="right" style="width:150px;height:100px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">CCTV Monitoring</label>
<div class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
document.getElementById("tab-one").click();
}
</script>
<script>
function myFunction2() {
document.getElementById("tab-two").click();
}
</script>
<script>
function myFunction3() {
document.getElementById("tab-three").click();
}
</script>
------------------------------------------------------------------------------------------
This code in the Expert tab
------------------------------------------------------------------------------------------
body {
color: #2c3e50;
background: #FFFFFF;
}
h1 {
text-align: center;
}
.half {
float: left;
width: 90%;
padding: 0 1em;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
color: #fff;
overflow: hidden;
}
input {
position: absolute;
opacity: 0;
z-index: -1;
}
label {
position: relative;
display: block;
padding: 0 0 0 1em;
background: #16a085;
font-weight: bold;
line-height: 3;
cursor: pointer;
}
.blue label {
background: #2980b9;
}
.tab-content {
max-height: 0;
overflow: hidden;
background: #1abc9c;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.blue .tab-content {
background: #aa98db;
}
.tab-content p {
margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
max-height:20em;
}
/* Icon */
label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
input[type=checkbox] + label::after {
content: "¤";
}
input[type=radio] + label::after {
content: "\25BC";
}
input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
----------------------------------------------------------------------------------------------------
Hope you have it to function.
If you want more information to my examples, then please contact me via the contact form on calendarforum.dk
You find it here : http://www.calendarforum.dk/contact.html
Hope you were helped by this.
Kind regards
John S.
Autor
Hello Jonh S,
Many thanks for sharing this.
I will give it a try and see how it goes.
Regards