电脑园地: 隐藏导航栏

2008年10月7日星期二

隐藏导航栏

隐藏导航栏（Navbar）！

Blogger 博客很不错，就那总挂在最上方的导航栏最碍眼，总觉得不搭调，哈哈！
抱歉，可能您很喜欢它，但是我就不喜欢它，要把它除掉，赫赫！

某天就找‘谷歌’帮忙“搜”，我搜，我搜，我搜搜搜。。。。。。
总算找到除掉它的方法把它给除掉了。。。。。。。。但是。。。。
可是，我要从哪里退出博客啊！虽然登入谷歌就可以，但是很不方便吖。

真没想到除掉它之后又不方便登入和搜素。。。

只好再找“谷歌”搜咯，哈哈，有谷歌在不用怕。
结果搜到已经有人成功用程式码把它给自动隐藏了。

过程即简单又好用。
首先（看下图）进入——>设计——>页面元素，左键点击“添加小工具”，找到“HTML／JavaScript”左键点击小工具右边的 + 号。

然后自会弹出（配置 HTML／JavaScript）的窗口。

看下图，标题可以留空白，内容里要填入程式码，填好程式码跟着点击“保存”就行了。

复制以下程式码，跟着粘贴到配置版面的内容里~

<!-- Dropdown Navbar -->
<!-- 支援 Firefox 2~ , Opera 9~, Chrome 2~, Safari 3~, IE7

(strict mode) -->
<style type="text/css">
#navbar {
display: inline;
width: 100%;
position: absolute;
background-color: transparent;
top: -30px;
left: 0px;
height: 60px;
z-index: 999999;
}
#navbar:hover {
top: 0px;
height: 30px;
}
</style>

<!-- IE7 之前版本修正 -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height: 30px;
top: 0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if (navbar) {
navbar.onmouseover = function() {
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function() {
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents) {
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->

<!-- IE8 與之後版本修正 -->
<!--[if gte IE 8]>
<style type="text/css">
#navbar {
position: fixed;
top: 0px;
height: 30px;
}
#navbar div {
display: none;
}
</style>
<script type='text/javascript'>
var navBar = document.getElementById('navbar');
if (navBar) {
navBar.onmouseover = function() {
var navBar1 = document.getElementById('Navbar1');
if (navBar1) navBar1.style.display='block';
};
navBar.onmouseout = function() {
var navBar1 = document.getElementById('Navbar1');
if (navBar1) navBar1.style.display='none';
};
}
</script>
<![endif]-->
<!-- End Dropdown Navbar -->

复制以上程式码，跟着粘贴到配置版面的内容里~

填入程式码保存后查看博客，导航栏终于隐藏了。不错哦（看下图）。