Like SystemiConnectFri 15 Oct 2021, 04:50
Auto Save MessagesLGforumFri 26 Feb 2021, 13:31
New tutorial questionTheCrowMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)LGforumSun 14 Feb 2021, 01:25
LGforum (2806)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Mr.Easybb (1587)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Bloodbath (745)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Rukiafan (533)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Dom (513)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
puppycheese (446)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
pedro (330)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Neymar (301)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Hitsu (281)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 
Flora (275)
Topics tagged under option on AvacWeb Vote_lcapTopics tagged under option on AvacWeb Voting_barTopics tagged under option on AvacWeb Vote_rcap 

Search found 1 match for option

LGforum
Search in: Thoughts and Tips from LG
Topic: Toggling just using CSS
Toggling just using CSS
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:
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! Smile

#LGBB #tips
Forum: Thoughts and Tips from LG | Topic: Toggling just using CSS
Back to top