导航界面

Leave a comment

其实wordpress有一个导航栏来着。。。就是杵在最上面那一行。但是我嫌弃它功能不够,于是另做了一个

那么问题来了,我明明可以换个模板

哦不,还有什么模板可以拥有如此大的版头让我放图?坚决不换!

新捣鼓了一个专门的导航界面,可是在如何“点击左面菜单,跳转至右边框架内显示内容”上费了一番功夫

在查找了div,css,js,ajax等诸多方法后,我最终决定,还是用iframe省事得了

事实证明,即便你没上过什么java课,只要掌握基本搜索能力,没有什么是办不到的!

放一下我辛苦搜寻的代码,全部在html页面修改即可

首先在</head>前面添加这一段

  1. <script type="text/javascript">   
  2. function showConent(url) {   
  3.     var p = document.getElementById("right_content");   
  4.     p.src=url;   
  5. }   
  6. </script> 

左侧菜单栏,链接url地址更改为

  1. <a href="javascript:void(0);" onmousedown="showConent('url')"></a> 

右侧显示内容区,更改如下

  1. <div class="body_right"> 
  2. <iframe src=""  id="right_content" scrolling="yes"  style="width:100%;height:100%"></iframe>  
  3.    </div> 

大功告成!

好了,我继续捣鼓去了

关于wordpress导航页使用鼠标悬停效果

Leave a comment

添了个一键上拉的按钮

加了留言的链接,这个实际效果还是达不到我想要的,试了很多方法还是不行,wordpress的模板真的想让人骂街。。。

最后,我试着做了一个鼠标悬停图片显示的效果,没想到真的做出来了!

不过有一个问题还是没有解决,我只打算在第一级navi使用悬停效果,但可能是因为使用了menu的缘故,它整个子页面全部适用了(囧)

分享下代码(直接扔自定义里的额外CSS里就行)

  1. .menu-item-5777 a:hover {  
  2.  background:url(" ") no-repeat ; background-size:40px; width:50px;background-position:center; text-indent:-9999px; }  

我觉得理论上只显示第一级是可以做到的,只要能找到定位的id就行了。不过我的第一级导航都是超链接,具体以后慢慢再研究吧,如果有知道的烦请赐教。

当然还有个土办法。。那就是索性把后面2,3级导航全做个图片放上去。。。噗,画面太美不敢看

那么问题又来了,我做这个出来干什么呢

当然是为了好玩啊,我抠图瘾又犯了,我看着心里高兴