Tutorial Advance Menu Sidebar dengan CSS HTML dan JavaScript
Posted: 02 May 2018, 11:31
Tutorial ini untuk membuat menu Sidebar dengan menggunakan javascript css dan HTML, karena javascript dilarang saat membuat custom block manager maka dilakukan trik untuk dapat bekerja pada sistem OJS. berikut tuorial dalam bentuk video
https://www.youtube.com/watch?v=eOYPc3_6pkA
Untuk Script yang pertama adalah script java yang akan kita tempelka di Plugins CustomHeader
Script selanjutnya adalah script untuk membuat Menu Sidebar HTML pastekan kode berikut pada CustomBlock Manager.
Script Berikutnya adalah file css yang akan kita upload di setting/appearance style
Untuk file css diatas dapat kita kombinasikan dengan css yang sudah ada sebelumbya untuk pemformatan style halaman OJS, intinya gabung kode css yang anda pakai dengan css untuk sidebar menu ini.
https://www.youtube.com/watch?v=eOYPc3_6pkA
Untuk Script yang pertama adalah script java yang akan kita tempelka di Plugins CustomHeader
Code: Select all
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
<script src=”http://jurnalanda.ac.id/script.js”></script>Code: Select all
<div id='cssmenu'>
<ul>
<li><a href='#'><span>MENU</span></a></li>
<li class='active has-sub'><a href='#'><span>ADDITIONAL MENU</span></a>
<ul>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/about/editorialTeam"><span>Editorial Team</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/reviewers"><span>Peer Review</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/reviewers">Peer Reviewers</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/review"><span>Peer Review Process</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/focusandscope"><span>Focus and Scope</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/ethic "><span>Publication Ethics</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/onlinesubmission"><span>Online Submission</span></a> </li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/guideline"><span>Online Submission Guidelines</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/plagiarism "><span>Plagiarism Check</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/apcs "><span>Article Proccessing Charge</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/openaccess "><span>Open Access Statement</span></a></li>
<li><a href="http://jurnal.htp.ac.id/index.php/keskom/licence"><span>Licence Term</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>SUPLEMENTARY FILES</span></a>
<ul>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVb2ZWNDZjX09scDg/view?usp=sharing" target="_blank" rel="noopener"><span>COI Disclosure</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVZFVfay0zOFU2ekE/view?usp=sharing" target="_blank"><span>ICMJE Recommendation</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVSHhMU1F3dHhhb28/view?usp=sharing" target="_blank"><span>STROBE Guidelines</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVTE5hZXhEZ1B2ZkU/view?usp=sharing" target="_blank" rel="noopener"><span>SRQR Guidelines</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVdlhoNFlYdmYycFE/view?usp=sharing" target="_blank" rel="noopener"><span>Free Plagiarism Statement</span></a></li>
<li><a href="https://drive.google.com/file/d/0B0KJITuOYogVQXhEMDAycXZHSEE/view?usp=sharing" target="_blank"><span>Covering Letter and Statement Form</span></a></li>
</ul>
</li>
<li><a href='#'><span>Template</span></a></li>
<li class='last'><a href='#'>Histori Jurnal<span></span></a></li>
</ul>
</div>Code: Select all
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #dddddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background: #222222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #ffffff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #dddddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #ffffff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #dddddd;
color: #777777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #dddddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666666;
}