on Mon 02 May 2016, 09:32 by LGforum
I thought I'd share an interesting mini CSS tip I came across a while back and that's using CSS toggle elements.
Its common belief that Javascript must be used in order to toggle an element, however if your toggle is on mouseover, or focus/blur of an output you can actually create toggle using just CSS.
Consider the following HTML:
Then using this CSS, will make the #popup box show when hovering over the #option box:
It is using this effect that I made the tooltip bbcode on this forum using LGBB. Hover over this: [tip]This tip is shown using CSS[/tip]
You can actually use this effect to create some fancy menu's. Here's a nice accordion style menu for you to play with.
The HTML
Hope it helps you get rid of some un-needed Javascript in your page!
#LGBB #tips
Its common belief that Javascript must be used in order to toggle an element, however if your toggle is on mouseover, or focus/blur of an output you can actually create toggle using just CSS.
Consider the following HTML:
- Code:
[panda=html]<div id="option">Hover over me</div>
<div id="popup">This box will show on hover of #option</div>
Then using this CSS, will make the #popup box show when hovering over the #option box:
- Code:
[panda=css]#popup { display: none }
#option:hover + #popup { display: block }
It is using this effect that I made the tooltip bbcode on this forum using LGBB. Hover over this: [tip]This tip is shown using CSS[/tip]
You can actually use this effect to create some fancy menu's. Here's a nice accordion style menu for you to play with.
The HTML
- Code:
[panda=html]<div id="LGaccordion">
<span class="option">Option 1</span>
<span class="sub_options">
<ul>
<li>Sub option 1</li>
<li>Sub option 2</li>
<li>Sub option 3</li>
</ul>
</span>
<span class="option">Option 1</span>
<span class="sub_options">
<ul>
<li>Sub option 1</li>
<li>Sub option 2</li>
<li>Sub option 3</li>
</ul>
</span>
<span class="option">Option 1</span>
<span class="sub_options">
<ul>
<li>Sub option 1</li>
<li>Sub option 2</li>
<li>Sub option 3</li>
</ul>
</span>
</div>
- Code:
[panda=css]#LGaccordion {
width: 250px;
border: 1px solid #666;
-webkit-box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
padding: 0 1px;
}
#LGaccordion .sub_options { display: none }
#LGaccordion .option {
display: block;
color: black;
background: #ccc;
border-bottom: 1px solid;
border-top: 1px solid #fff;
}
#LGaccordion .option:hover + .sub_options {
display: block!important;
}
Hope it helps you get rid of some un-needed Javascript in your page!
#LGBB #tips