These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.
*CODE*
/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout .sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}
body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}
body#layout #outer-wrapper {
width: 730px;
}
body#layout #footer-wrap1 {
padding-top: 0;
}
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.preload15 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTP7euOxuuspW4N_pj0cHKG44AaT5Jm_Fl5swij687GtLsoPWHujuShu-Oi2XhqwxTtbrrTFBiegrISPums0oPQB887wt88YqVZvxgkjUeWfHAq6abQRd8TV7_zx2RCpdVZbOBGhb9I0/s400/pro_15_1.gif);}
.pro15 {padding:0 0 0 20px; margin:0; list-style:none; height:30px; background:#1841c8 url(http://2.bp.blogspot.com/_c-
XFk4OciTE/R9rK338-11I/AAAAAAAAAZw/CMao7v_DUtg/s400/pro_15_0.gif);}
.pro15 li {float:left;}
.pro15 li a {display:block; float:left; height:30px; line-height:30px; background:url(http://2.bp.blogspot.com/_c-
XFk4OciTE/R9rK338-11I/AAAAAAAAAZw/CMao7v_DUtg/s400/pro_15_0.gif); color:#254117; text-decoration:none; font-family:arial,
verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:11px;}
.pro15 li a b {float:left; display:block; background:url(http://2.bp.blogspot.com/_c-XFk4OciTE/R9rK338-
11I/AAAAAAAAAZw/CMao7v_DUtg/s400/pro_15_0.gif) right top; padding:0 16px 0 8px; color:#254117;}
.pro15 li.current a {color:#fff; background:url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9rK4X8-
13I/AAAAAAAAAaA/xlwvl2QTp4c/s400/pro_15_2.gif);}
.pro15 li.current a b {background:url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9rK4X8-
13I/AAAAAAAAAaA/xlwvl2QTp4c/s400/pro_15_2.gif) no-repeat right top; color:#fff;cursor:pointer;}
.pro15 li a:hover {color:#fff; background: url(http://3.bp.blogspot.com/_c-XFk4OciTE/R9rK4H8-
12I/AAAAAAAAAZ4/gKdf3mjpStk/s400/pro_15_1.gif); text-decoration:none;}
.pro15 li a:hover b {background:url(http://3.bp.blogspot.com/_c-XFk4OciTE/R9rK4H8-
12I/AAAAAAAAAZ4/gKdf3mjpStk/s400/pro_15_1.gif) no-repeat right top; color:#fff;text-decoration:none;}
.pro15 li.current a:hover {color:#fff; background: url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9rK4X8-
13I/AAAAAAAAAaA/xlwvl2QTp4c/s400/pro_15_2.gif); cursor:default;text-decoration:none;}
.pro15 li.current a:hover b {background:url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9rK4X8-
13I/AAAAAAAAAaA/xlwvl2QTp4c/s400/pro_15_2.gif) no-repeat right top; color:#fff; text-decoration:none;}
.pro15 li a em {display:block; float:left; width:16px; height:30px;}
.pro15 li a em.home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitk0mb4RDEiUTejOG3gyQruN8JsrMw0nXqnqlFPH4jXamvd7OK-p8IbHNiUqbu96Vxsbi0XA9uDx1UNHJGbAPBiQGZ_pJqcOd27daOOZPSnLJcmVDBWhPym8I1goBRnlibWgJvcE1vIw4/s400/home.gif)
no-repeat center center;}
.pro15 li a em.template {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEkQg93hb3m9M3h-5I7Qs0teVQ1a7Ic7XIVvZXuU7l0K4KJfMz-gKu4Dl1IRronPkWR2vSF1n64imoFnq1P7BzXsEeF9nQSN_LxPJ9jJtNkEHFBsJ_ph_nTxXVGe0Q1yrn_OCq6zJdoU/s400/page.gif
) no-repeat center center;}
.pro15 li a em.blogtutor {background:url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9qzaX8-
1pI/AAAAAAAAAYQ/siq71IH05sk/s400/key.gif) no-repeat center center;}
.pro15 li a em.library {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN2NdJNYhpcybL0kYX-Gs4u4JTWF0YUcjeHi6rzKGXWUZGO8mgau85iIUZLQOQerefvxJX1tWkW9OQ9A_J9TNeFcWKRrSuxrDKSEEK7Eh5QZTCJs5b6kG_rF31qk3TBw19n7pouUAa9Vo/s400/info.gif)
no-repeat center center;}
.pro15 li a em.obral {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ve3X8G2HWHTw23-Zx4fH7AwpVf4FizXIGO0AkIroGbGaIWY_PLrNLz7wKqMU-OdxxA8wakBKlRjAaJ2dul7uMrxxdd36BA0MFmnXKLy1v-N8Kueu7Do41QWZVu_SwgQlybHhIydJYf8/s400/book.gif)
no-repeat center center;}
.pro15 li a em.resep {background:url(http://4.bp.blogspot.com/_c-XFk4OciTE/R9qzlX8-
1rI/AAAAAAAAAYg/yInfi4UPgDU/s400/monitor.gif) no-repeat center center;}
/* thumbnail
======================== */
.tabel {
padding:5px;
margin:0;
float:left;
}
.thumbnail {
position:relative;
z-index:100;
}
.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {
display:block;
text-decoration:none;
background:transparent;
top:0;
left:0;
border: 2px solid #000;
}
.thumbnail a img {
border:0;
}
.thumbnail a.gambar-kecil:hover {
text-decoration:none;
background-color:#8c97a3;
color:#000;
border: 2px solid #00ff00;
}
.thumbnail a .gambar-besar1 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}
.thumbnail a.gambar-kecil:hover .gambar-besar1 {
display:block;
position:absolute;
top:0px;
left:200px;
width:400px;
height:300px;
border:7px solid #D21E00;
}
.thumbnail a .gambar-besar2 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}
.thumbnail a.gambar-kecil:hover .gambar-besar2 {
display:block;
position:absolute;
top:100px;
left:0px;
width:400px;
height:300px;
border:5px solid #000;
}
.thumbnail a .gambar-besar3 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0; left:0;
}
.thumbnail a.gambar-kecil:hover .gambar-besar3 {
display:block;
position:absolute;
top:100px;
left:0px;
width:400px;
height:300px;
border:5px solid #000;
}
#menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0;
border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px
solid #ccc;}
How to install:
1. Login to your Blogger account of course.
សូមចូលក្នុង account របស់អ្នក
2. Go to your HTML Editor on your blogger dashboard.
បន្ទាប់មកចូលក្នុង HTML Editor
3. Tick the Expand Widget Template
ចូរចុចធិចយក ត្រង់ Expand Widget Template
4-Coppy this code into HTML that have like #
លោកអ្នកអាចចម្លងកូដនេះទៅដាក់ក្នុង HTML ដែលមាននិមិត្តសញ្ញាបែបនេះ #
5-and then to write in your sidebar widget with Java script like this:
ហើយបន្ទាប់មកចូលទៅសរសេរនៅក្នុង sidebar widget ដោយយកប្រភេទ Java script ហើយសរសេរដូច្នេះ៖
<span class="preload15"></span>
<ul class="pro15">
<li class="current">
<a href="http://socheatk.blogspot.com/" title="#1"><em class="HOME"></em><b>Home</b></a></li>
<li><a href="#1" title="#1"><em class="template"></em><b>LINK 1</b></a></li>
<li><a href="#2" title="#2"><em class="blogtutor"></em><b>LINK 2</b></a></li>
<li><a href="#3" title="#3"><em class="library"></em><b>LINK 3</b></a></li>
<li><a href="#4"><em class="library"></em><b>LINK 4</b></a></li>
<li><a href="#5" title="#5"><em class="obral"></em><b>LINK 5</b></a></li>
<li><a href="#6" title="#6"><em class="resep"></em><b>LINK 6</b></a></li>
</ul>
