menulagi. Sebelumnya gue sudah berbagi tutorial membuat lists toc menu! Sekarang berbagi cara membuat menu ala google plus punya :-B Bagi kalian yang sering bermain jejaring web google+, pasti tidak akan asing dengan keberadaan menu navigasi sebelah kiri, yg akan muncul setiap kali kita sorot!
Tidak mirip 100% dengan apa yg tampak pada screenshot :"> Gaya, teknik and hasil jadi bisa dikatakan serupa ;)) Main menu diposisikan diam di kanan pojok dengan tinggi - www.w3schools.com/cssref/pr_gen_content.asp
- developer.mozilla.org/en-US/docs/Web/CSS/content
- www.w3.org/TR/CSS21/generate.html#content
- dev.opera.com/articles/view/css-generated-content-techniques/
#main-navigation {
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}
Planning HTML
Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/
<div id='main-navigation'>
<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>
Source coded by: codepen.io/joshumax/full/asIfy<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>
Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/
In Post/Item Page
SOLUSI
Ingin menikmati yang terbaik dari Google? Cukup masuk, anda hanya membutuhkan satu nama pengguna dan sandi untuk membuka kunci berbagai fitur layanan yang digunakan setiap hari, seperti Gmail, Maps, Google+, Apps Google dan YouTube.
this.PrevMonth = PrevMonth;
this.NextMonth = NextMonth;
this.refreshTable = refreshTable;
this.drawTable = drawTable;
this.Calendar = Calendar;
this.fetchposts = fetchposts;
this.addLink = addLink;
this.monthTable = monthTable;
this.yearTable = yearTable;
this.toggleTOC = toggleTOC;
this.drawTOCTable = drawTOCTable;
this.gainControl = gainControl;
this.sortTable = sortTable;
this.alreadyrunflag = 0;
this.week_label = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
this.month_label_real = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.today = new Date();
this.cur_day = new Date();
this.startDay = 0;
this.base = 'lvchen.blogspot.com';
this.timeZone = '+08:00';
this.timeZoneCheck = false;
this.alignFooter = true;
this.todayMsg = 'Today';
this.showTOC = new Array('List', 'Calendar');
this.listMode = false;
this.loading = '<img src="http://3.bp.blogspot.com/-3BP3tHg7lFc/UEKDOx4BjZI/AAAAAAAAAZs/xzsbHzOi4Tk/s16/ajax-loader.jpg"></img>';
this.tableColor = 'white'
}
function Calendar(a) {
var b = a.getFullYear();
var c = Calendar.month_label[a.getMonth()] + '';
var d = Calendar.month_days[a.getMonth()];
var e = Calendar.today.getDate();
if (a.getMonth() == 1 && (((b % 4 == 0) && (b % 100 != 0)) || (b % 400 == 0))) {
d = 29;
Calendar.month_days[1] = '29'
} else Calendar.month_days[1] = '28';
Calendar.startDay = a.getDay();
var f = '';
f += '<table style="text-align:center;" align="center" cellspacing="0">';
f += '<tr>';
for (var g = 0; g < 7; g++) {
f += '<th>' + Calendar.week_label[g] + '</th>'
}
f += '</tr>';
var h = 0;
for (g = 0; g < Calendar.startDay; g++) {
if (h == 0) f += '<tr>';
f += '<td class="Lastday"> </td>';
h++
}
for (g = 1; g <= d; g++) {
if (h == 0) f += '<tr>';
if (g == e && a.getMonth() == Calendar.today.getMonth() && b == Calendar.today.getFullYear()) f += '<td class="Today">' + g + '</td>';
else f += '<td class="Lastday">' + g + '</td>';
if (h == 6) {
f += '</tr>';
h = 0
} else h++
}
if (h > 0) {
for (var i = 0; i < (7 - h); i++) {
f += '<td class="Lastday"> </td>'
}
f += '</tr>'
}
f += '</table>';
return f
}
function fetchposts(a, b, c) {
var d = document.getElementById('jsonPosts');
if (d != undefined) document.documentElement.firstChild.removeChild(d);
if (b == 11) {
var e = '01';
var f = a + 1
} else {
var e = Calendar.month_label[b + 1];
var f = a
}
var g = 'published-min=' + a + '-' + Calendar.month_label[b] + '-01T00%3A00%3A00' + Calendar.timeZone + '&published-max=' + f + '-' + e + '-01T00%3A00%3A00' + Calendar.timeZone + '&max-results=35&start-index=' + c;
var h = document.createElement('script');
if (!Calendar.listMode) var i = 'http://' + Calendar.base + '/feeds/posts/summary?alt=json-in-script&callback=Calendar.addLink&' + g;
else var i = 'http://' + Calendar.base + '/feeds/posts/summary?alt=json-in-script&callback=Calendar.drawTOCTable&' + g;
h.setAttribute('src', i);
h.setAttribute('id', 'jsonPosts');
h.setAttribute('type', 'text/javascript');
document.getElementsByTagName('HEAD')[0].appendChild(h)
}
function addLink(a) {
var b = document.getElementById('CalendarTable');
var c = a.feed.entry;
var d = '';
var e = Calendar.timeZone;
if (c != undefined) {
var f = b.getElementsByTagName('td');
for (var i = 0; i < c.length; i++) {
var g = c[i].published.$t.substr(0, 10);
var h = g.substr(8, 2);
var k = f[Calendar.startDay + (parseInt(h, 10) - 1)];
var l = c[i].title.$t;
var j = 0;
while (j < c[i].link.length && c[i].link[j].rel != 'alternate') j++;
var m = j;
if (h == d) {
var n = k.firstChild;
var o = n.getAttribute('href');
var p = o.match(/(max-results=)(\d+)/i);
if (p == null) {
if (Calendar.timeZoneCheck) {
var q = c[i].published.$t.substr(23, 6);
if (q != unescape(e)) {
e = encodeURIComponent(q);
e = e.replace(/\-/, '%2D')
}
}
var r = g.substr(5, 2);
if (h == Calendar.month_days[parseInt(r, 10) - 1]) {
var s = g.substr(0, 4) + '-' + (parseInt(r, 10) + 1) + '-01';
if (s.length < 10) s = s.substr(0, 5) + '0' + s.substr(5, 5)
} else {
var s = g.substr(0, 8) + (parseInt(h, 10) + 1);
if (s.length < 10) s = s.substr(0, 8) + '0' + s.substr(8, 1)
}
o = 'http://' + Calendar.base + '/search?updated-min=' + g + 'T00%3A00%3A00' + e + '&updated-max=' + s + 'T00%3A00%3A00' + e + '&max-results=2'
} else o = o.replace(/(max-results=)(\d+)/i, '$1' + (p[2] * 1 + 1));
n.setAttribute('href', o);
n.setAttribute('title', l + ', \n' + n.getAttribute('title'));
continue
}
d = h;
k.innerHTML = '<a href=' + c[i].link[m].href + ' title="' + l.replace(/\"/g, '"') + '">' + k.innerHTML + '</a>';
k.className = 'Linkday'
}
}
if (a.feed.openSearch$totalResults.$t * 1 > 35) {
if (!Calendar.listMode) fetchposts(g.substr(0, 4) * 1, r * 1, a.feed.openSearch$startIndex.$t * 1 + 35, 'cal');
else fetchposts(g.substr(0, 4) * 1, r * 1, a.feed.openSearch$startIndex.$t * 1 + 35, 'list')
} else Calendar.gainControl()
}
function drawTable() {
var a = document.createElement('div');
a.setAttribute('id', 'CalendarCaption');
var b = '<div id="monthTable" style="z-index:999;background-color:' + Calendar.tableColor + ';">';
for (var i = 0; i < 12; i++) {
b += '<a href="javascript:Calendar.monthTable(' + i + ');">' + Calendar.month_label_real[i] + '</a><br>'
}
b += '</div>';
var c = '<div id="yearSelect"><form name="form2year" onsumbit="javascript:return false;" action="">';
c += '<input style="width:4em;z-index:999;" class="yearInput" type="text" value="' + Calendar.cur_day.getFullYear() + '" name="enteryear" onkeypress="if(event.keyCode==13||event.which == 13) {Calendar.yearTable(this.value); return false;}" /></form></div>';
var d = '<table align="center"></tbody><tr><td><a href="javascript:void(0);"><< </a></td>';
d += '<td style="text-align:center;width:70%"><span id="CalendarMonth"><span id="monthTable_parent"></span> ';
d += '<span id="yearSelect_parent"></span></span></td>';
d += '<td><a href="javascript:void(0);"> >></a></td></tr></tbody></table>';
d += b + c;
a.innerHTML = d;
var e = document.createElement('div');
e.setAttribute('id', 'CalendarTable');
var f = document.createElement('div');
f.setAttribute('id', 'CalendarFooter');
f.style.textAlign = 'left';
var g = '<a href="javascript:Calendar.cur_day.setTime(Calendar.today);Calendar.refreshTable();" id ="Today" class="Today">' + Calendar.todayMsg + '</a> ';
g += '<span id="todayShow">' + Calendar.month_label[Calendar.cur_day.getMonth()] + '/';
if (Calendar.cur_day.getDate().toString().length < 2) g += '0' + Calendar.cur_day.getDate();
else g += Calendar.cur_day.getDate();
g += '/' + Calendar.cur_day.getFullYear() + '</span>';
g += '<span id="showTOC"> <a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[0] + '</a> </span>';
g += '<span id="CalLoading">' + Calendar.loading + '</span>';
f.innerHTML = g;
var h = document.getElementById('blogCalendar');
h.style.textAlign = 'center';
h.appendChild(a);
at_attach('monthTable_parent', 'monthTable', 'click', 'y', 'pointer');
at_attach('yearSelect_parent', 'yearSelect', 'click', 'y', 'pointer');
h.appendChild(e);
if (Calendar.alignFooter) {
var j = a.getElementsByTagName('table')[0].offsetLeft - a.offsetLeft;
f.style.paddingLeft = j + 'px'
}
h.appendChild(f);
if (Calendar.timeZone.length < 4 && Calendar.timeZone != 'Z') Calendar.timeZone = Calendar.timeZone + ':00';
Calendar.timeZone = encodeURIComponent(Calendar.timeZone);
Calendar.timeZone = Calendar.timeZone.replace(/\-/, '%2D');
Calendar.refreshTable()
}
function refreshTable() {
var a = Calendar.cur_day.getMonth();
var b = Calendar.cur_day.getFullYear();
document.getElementById('monthTable_parent').innerHTML = Calendar.month_label_real[a];
document.getElementById('yearSelect_parent').innerHTML = b;
Calendar.cur_day.setDate(1);
if (!Calendar.listMode) document.getElementById('CalendarTable').innerHTML = Calendar.Calendar(Calendar.cur_day);
if (Calendar.today >= Calendar.cur_day) {
var c = document.getElementById('CalendarCaption').getElementsByTagName('a');
c[0].setAttribute('href', 'javascript:void(0)');
c[1].setAttribute('href', 'javascript:void(0)');
var d = document.getElementById('CalendarFooter').getElementsByTagName('*');
for (var i = 0; i < d.length; i++) {
if (d[i].getAttribute('id') == 'CalLoading') d[i].style.display = 'inline';
else if (d[i].getAttribute('id') != null) d[i].style.display = 'none'
}
if (/Safari/i.test(navigator.userAgent)) {
var e = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(e);
Calendar.alreadyrunflag = 1;
Calendar.fetchposts(b, a, 1)
}
}, 10)
} else Calendar.fetchposts(b, a, 1)
} else {
if (document.getElementById('TOCTable') != null) document.getElementById('TOCTable').innerHTML = ''
}
}
function toggleTOC() {
if (!Calendar.listMode) {
Calendar.listMode = true;
document.getElementById('showTOC').innerHTML = ' <a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[1] + '</a> ';
var a = document.getElementById('CalendarTable');
var b = a.getElementsByTagName('table')[0];
var c = b.offsetHeight;
var d = '<div id="TOCScroll"><table id="TOCTable" style="width:' + b.offsetWidth + 'px;"></table></div>';
a.innerHTML = d;
var e = document.getElementById('TOCScroll');
e.style.overflow = 'auto';
e.style.height = c;
Calendar.refreshTable()
} else {
Calendar.listMode = false;
document.getElementById('showTOC').innerHTML = ' <a href ="javascript:Calendar.toggleTOC();">' + Calendar.showTOC[0] + '</a> ';
Calendar.refreshTable()
}
}
function drawTOCTable(a) {
var b = document.getElementById('TOCScroll');
var c = '<table id="TOCTable" style="text-align:left;width:' + document.getElementById('TOCTable').offsetWidth + 'px;" align="center" cellspacing="0">';
var d = a.feed.entry;
if (d != undefined) {
c += '<thead><tr><th onclick="Calendar.sortTable('TOCTable',0)" style="cursor: pointer;text-align:center;">Title</th><th onclick="Calendar.sortTable('TOCTable',1,'date' )" style="cursor: pointer;text-align:center;">Date</th></tr></thead>';
for (var i = 0; i < d.length; i++) {
var e = d[i].published.$t.substr(0, 10);
var f = e.substr(8, 2);
var g = d[i].title.$t;
var h = e.substr(5, 2);
var j = 0;
while (j < d[i].link.length && d[i].link[j].rel != 'alternate') j++;
var k = j;
c += '<tr><td><a href="' + d[i].link[k].href + '">' + g + '</a></td><td>' + h + '/' + f + '</td></tr>'
}
c += '</table>';
b.innerHTML = c;
sortTable('TOCTable', 1, 'date')
} else {
c += '</table>';
b.innerHTML = c
}
Calendar.gainControl()
}
function PrevMonth() {
theMonth = Calendar.cur_day.getMonth() - 1;
year = Calendar.cur_day.getFullYear();
if (theMonth < 0) {
theMonth = 11;
year--
}
Calendar.cur_day.setFullYear(year, theMonth);
Calendar.refreshTable()
}
function NextMonth() {
theMonth = Calendar.cur_day.getMonth() + 1;
year = Calendar.cur_day.getFullYear();
if (theMonth > 11) {
theMonth = 0;
year++
}
Calendar.cur_day.setFullYear(year, theMonth);
Calendar.refreshTable()
}
function monthTable(a) {
Calendar.cur_day.setMonth(a);
Calendar.refreshTable()
}
function yearTable(a) {
Calendar.cur_day.setYear(a);
Calendar.refreshTable()
}
function gainControl() {
var a = document.getElementById('CalendarCaption').getElementsByTagName('a');
a[0].setAttribute('href', 'javascript:Calendar.PrevMonth();');
a[1].setAttribute('href', 'javascript:Calendar.NextMonth();');
var b = document.getElementById('CalendarFooter').getElementsByTagName('*');
for (var k = 0; k < b.length; k++) {
if (b[k].getAttribute('id') == 'CalLoading') b[k].style.display = 'none';
else if (b[k].getAttribute('id') != null) b[k].style.display = 'inline'
}
}
Calendar = new ArchiveCalendar();
function at_show_aux (a, b) {
var p = document.getElementById(a);
var c = document.getElementById(b);
var d = (c["at_position"] == "y") ? p.offsetHeight + 2 : 0;
var e = (c["at_position"] == "x") ? p.offsetWidth + 2 : 0;
for (; p; p = p.offsetParent) {
d += p.offsetTop;
e += p.offsetLeft
}
c.style.position = "fixed";
c.style.top = d + 'px';
c.style.left = e + 'px';
c.style.visibility = "visible"
}
function at_show() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
at_show_aux (p.id, c.id);
clearTimeout(c["at_timeout"])
}
function at_hide() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("document.getElementById('" + c.id + "').style.visibility = 'hidden'", 333)
}
function at_click() {
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child"]);
if (c.style.visibility != "visible") at_show_aux (p.id, c.id);
else c.style.visibility = "hidden";
return false
}
function at_attach(a, b, d, e, f) {
var p = document.getElementById(a);
var c = document.getElementById(b);
p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = e;
c["at_position"] = e;
c.style.position = "absolute";
c.style.visibility = "hidden";
var g = c.childNodes;
for (var i = 0; i < g.length; i++) {
if (g[i].nodeName == 'FORM') break
}
if (f != undefined) p.style.cursor = f;
switch (d) {
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
if (i == g.length) c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
if (i == g.length) c.onmouseout = at_hide;
break
}
}
function sortTable(g, h, j) {
function convert(a, b) {
switch (b) {
case "date":
return new Date(Date.parse(a + '/2000'));
default:
return a.toString()
}
}
function generateCompareTRs(e, f) {
return function compareTRs(a, b) {
var c = a.cells[e].firstChild;
var d = b.cells[e].firstChild;
if (f == 'date') {
vValue1 = convert(c.nodeValue, f);
vValue2 = convert(d.nodeValue, f)
} else {
vValue1 = convert(c.innerHTML, f);
vValue2 = convert(d.innerHTML, f)
}
if (vValue1 < vValue2) return -1;
else if (vValue1 > vValue2) return 1;
else return 0
}
}
var k = document.getElementById(g);
var l = k.tBodies[0];
var m = l.rows;
var n = new Array;
for (var i = 0; i < m.length; i++) {
n[i] = m[i]
}
if (k.sortCol == h) n.reverse();
else n.sort(generateCompareTRs(h, j));
var o = document.createDocumentFragment();
for (var i = 0; i < n.length; i++) {
o.appendChild(n[i])
}
l.appendChild(o);
k.sortCol = h
}