- To minimize screen area taken up, the top level deliberately contains just one item.
- Both the style and the HTML components are in an 'HTML/Javascript' gadget located in the the Blogger page footer area. This is for simplicity during design and development.
- Once finalized, the Blogger template may be editted directly and the coding moved there.
- The menu style is 'pure CSS' - no Javascript is used.
- The menu items are simply nested UL's (unordered lists).
<style>
/* pure css toggleable window */
/* #toggleinner substituted for .toggleable-window */
#toggleinner input.toggle {
display: none;
}
#toggleinner label {
color: white;
font-size: 3em;
font-weight:bold;
}
#toggleinner label:hover,
#toggleinner label:focus {
cursor: pointer;
}
#toggleinner input.toggle:checked ~ label {
font-weight:normal;
}
#toggleinner input.toggle:checked ~ div {
display: none;
}
#toggleinner div {
position: absolute;
width: 100%;
background: magenta;
}
.menuwrapper {
position: fixed; /* relative; */
top:0;
left:50%;
width: 10em;
z-index:999;
}
/* after http://bytutorial.com/blogs/css/css-vertical-fly-out-menu */
/* Remove margin, padding and list style of UL and LI components */
.menuwrapper ul, .menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}
/* Apply menu-item style with image on left, text on right */
.menuwrapper ul li{
color:black;
background:#fefef0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7IZf143vgnK_um29jS9llDuwrylkAWmQN9WdfksqJv2_taKaKCUFn7gjqlyJ1WL4IpY4P0wldcNyKfkGhyvMu7gz3X3gpAPPsx5clAnT8GPzkdrDdm-n2qBh2H7To5f7-nQy_vBU5gE/s1600/icon0.jpg") left no-repeat;
border-bottom:solid 1px white;
width:150px;
cursor:pointer;
text-align: right;
}
/* Apply hover style of LI component */
.menuwrapper ul li:hover{
color:red;
background:#fefef0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKNxSRN1LQ5rngj5iEUfXZS3aZ1MY4xNNY4SADLly-xi3sfnBugXwCkiznOb_Z4ADnkhoVOt-e9bNNDdU6TLbMQtKIQN8M7dkxcq0qNs7_1StP2Z-wKmGfnUQiz9cV3kP6R-lp1FfBq0/s1600/icon1.jpg") left no-repeat;
position:relative;
}
/* Basic link style */
.menuwrapper ul li a{
padding:5px 5px;
display:inline-block;
text-decoration:none;
}
.menuwrapper a, .menuwrapper a:visited {
color: black;
}
.menuwrapper a:hover, .menuwrapper a:active {
color:red;
}
/**** SECOND LEVEL MENU ****/
/* Hide level 2 UL until parent LI hovered over */
.menuwrapper ul li ul{
position:absolute;
display:none;
}
/* Display level 2 UL when parent LI hovered over. NB: 150px is individual menu width. */
.menuwrapper ul li:hover ul{
left:150px;
top:0px;
display:block;
}
/* Set color for level 2 menu items
.menuwrapper ul li ul li{
color:black;
background-color:#fefef0;
} */
/* Change image and colors of level 2 submenu item when hovering */
.menuwrapper ul li:hover ul li:hover{
color:red;
background:#fefef0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKNxSRN1LQ5rngj5iEUfXZS3aZ1MY4xNNY4SADLly-xi3sfnBugXwCkiznOb_Z4ADnkhoVOt-e9bNNDdU6TLbMQtKIQN8M7dkxcq0qNs7_1StP2Z-wKmGfnUQiz9cV3kP6R-lp1FfBq0/s1600/icon1.jpg") left no-repeat;
position:relative;
}
/* Set level 2 link style */
.menuwrapper ul li ul li a{
color:#454444;
display:inline-block;
width:120px;
}
/**** THIRD LEVEL MENU ****/
/* Hide level 3 menu when hovering level 1 menu */
.menuwrapper ul li:hover ul li ul{
position:absolute;
display:none;
}
/* Show level 3 menu when hovering level 2 parent */
.menuwrapper ul li:hover ul li:hover ul{
display:block;
left:150px;
top:0;
}
/* Set colors for level 3 submenu */
.menuwrapper ul li:hover ul li:hover ul li {
color:black;
background-color:#fefef0;
}
/* Change image and color of level 3 submenu item when hovering */
.menuwrapper ul li:hover ul li:hover ul li:hover{
color:red;
background:#fefef0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKNxSRN1LQ5rngj5iEUfXZS3aZ1MY4xNNY4SADLly-xi3sfnBugXwCkiznOb_Z4ADnkhoVOt-e9bNNDdU6TLbMQtKIQN8M7dkxcq0qNs7_1StP2Z-wKmGfnUQiz9cV3kP6R-lp1FfBq0/s1600/icon1.jpg") left no-repeat;
position:relative;
}
/* Set level 3 link color */
.menuwrapper ul li:hover ul li:hover ul li a{
color:black;
}
/* Set level 3 link hover color */
.menuwrapper ul li:hover ul li:hover ul li a:hover{
color:red;
}
/**** LEVEL 4 MENU ****/
/* Hide level 4 menu when hovering level 2 menu */
.menuwrapper ul li:hover ul li:hover ul li ul{
position:absolute;
display:none;
}
/* Show level 4 menu when hovering level 3 parent */
.menuwrapper ul li:hover ul li:hover ul li:hover ul {
display:block;
left:150px;
top:0;
}
/* Set colors for level 4 submenu */
.menuwrapper ul li:hover ul li:hover ul li:hover ul li {
color:black;
background-color:#fefef0;
}
/* Change image and color of level 3 submenu item when hovering */
.menuwrapper ul li:hover ul li:hover ul li:hover{
color:red;
background:#fefef0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKNxSRN1LQ5rngj5iEUfXZS3aZ1MY4xNNY4SADLly-xi3sfnBugXwCkiznOb_Z4ADnkhoVOt-e9bNNDdU6TLbMQtKIQN8M7dkxcq0qNs7_1StP2Z-wKmGfnUQiz9cV3kP6R-lp1FfBq0/s1600/icon1.jpg") left no-repeat;
position:relative;
}
/* Set level 4 link color */
.menuwrapper ul li:hover ul li:hover ul li:hover ul li a{
color:black;
}
/* Set level 4 link hover color */
.menuwrapper ul li:hover ul li:hover ul li:hover ul li a:hover{
color:red;
}
/* Clear float */
.clear{
clear:both;
}
</style>
<!-- IF USING SEPARATE STYLESHEET the CSS between the style tags above can be placed in a separate CSS document and referenced thus in the <head> section of a web page:
<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" /> -->
<div class="menuwrapper">
<ul>
<li><a>Menu</a>
<ul>
<li><a href="http://www.trevox.uk/">Home</a></li>
<li><a href="http://www.trevox.uk/p/along-with-many-people-i-enjoy-most.html">Music</a>
<ul>
<li><a href="http://folkshow.blogspot.co.uk/">Folk Show</a></li>
<li><a href="http://teatimeshow.blogspot.co.uk/">Teatime Show</a></li>
</ul>
</li>
<li><a href="http://www.trevox.uk/p/web-design-node-5-not-blog-entry-posted.html">Web design</a>
<ul>
<li><a href="http://www.trevox.uk/p/web-design-node-5-not-blog-entry-posted.html">Considerations</a></li>
<li><a href="http://www.trevox.uk/p/blog-page_23.html">Rates</a></li>
<li><a href="http://www.trevox.uk/p/blog-page_97.html">About</a></li>
</ul>
</li>
<li><a>Computing</a>
<ul>
<li><a href="http://www.trevox.uk/p/blog-page_25.html">Computer Care</a></li>
<li><a href="http://www.trevox.uk/p/blog-page.html">Practical Passwords</a></li>
<li><a href="http://www.trevox.uk/p/blog-page_80.html">Year 2038 Problem</a></li>
</ul>
</li>
<li><a href="http://www.trevox.uk/p/blog-archive.html">All 'blog posts</a></li>
<li><a>Useful links</a>
<ul>
<li><a href="http://www.argyllfm.com/" title="Local, independent radio station">Argyll FM</a></li>
<li><a href="http://www.campbeltown.org.uk/">Come to Campbeltown</a></li>
<li><a href="https://www.flickr.com/photos/yourdon/">Ed Yourdon photography - inspirational!</a></li>
</ul>
</li>
<li><a>Software reliance</a>
<ul>
<li><a>Music, Audio</a>
<ul>
<li><a href="https://www.ableton.com/en/live/">Ableton Live</a></li>
<li><a href="http://www.audacityteam.org/">Audacity</a></li>
<li><a href="https://www.mixedinkey.com/">Mixed-in-key</a></li>
<li><a href="http://www.mp3tag.de/en/">MP3tag</a></li>
<li><a href="http://www.otsav.com/">OTSAV</a></li>
<li><a href="http://www.platinumnotes.com/">Platinum Notes</a></li>
<li><a href="http://www.videolan.org/index.html">VLC media player</a></li>
</ul>
</li>
<li><a>Office Productivity</a>
<ul>
<li><a href="https://www.libreoffice.org/">LibreOffice</a></li>
<li><a href="http://www.pdfforge.org/pdfcreator">PDF Creator</a></li>
<li><a href="http://www.notetab.com/">Notetab</a></li>
</ul>
</li>
<li><a>Graphics, Images</a>
<ul>
<li><a href="https://www.gimp.org/">The GIMP</a></li>
</ul>
</li>
<li><a>Databases on line</a>
<ul>
<li><a href="https://musicbrainz.org/">MusicBrainz</a></li>
<li><a href="https://www.discogs.com/">Discogs</a></li>
<li><a href="https://en.wikipedia.org/">Wikipedia</a></li>
</ul>
</li>
<li><a>Essential Utilities</a>
<ul>
<li><a href="http://www.notetab.com/">Notetab</a></li>
<li><a href="https://get.adobe.com/uk/reader/">Adobe Reader</a></li>
<li><a href="http://keepass.info/">KeePass</a></li>
<li><a href="https://www.digitalvolcano.co.uk/">Duplicate Cleaner Pro</a></li>
<li><a href="http://www.7-zip.org/">7-Zip</a></li>
</ul>
</li>
<li><a>Internet</a>
<ul>
<li><a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a></li>
<li><a href="https://filezilla-project.org/">Filezilla FTP</a></li>
</ul>
</li>
<li><a>Operating Systems</a>
<ul>
<li><a href="https://www.ubuntu.com/">Ubuntu GNU-Linux</a></li>
<li><a href="https://www.apple.com/">Apple OSX & IOS</a></li>
<li><a href="https://www.microsoft.com/">Windows 7 & 10</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
