让loper主题菜单导航栏固定在顶部,如果文章字数,评论多,页面就会很长,分页的话浏览体验又不太好,不如一口气阅读到底爽快。为了读者浏览方便,把页面菜单导航栏固定在顶部起来是个不错的选择。
虽然固定导航栏可以用JS脚本代码,不过会加重网页负担,而且麻烦。
实际上固定菜单导航栏可以通过CSS中position:fixed属性实现。position:fixed是相对浏览器窗口定位元素,这样我们就可以让wordpress的菜单导航栏固定在浏览器窗口顶部的位置。
首先给整个顶部导航栏定义一个div,如<div id="topbox">。然后在CSS里添加以下代码:
#topbox { height: 36px; position: fixed; width: 100%; top: 0; left: 0; z-index: 1111; background-color: #4175af; opacity: .95; } |
说明:
1.#topbox对应的是id,如果定义的是class就是.topbox。
2.width:100%是自适应宽度,根据需要可以自己改为px。
3.top、left是相对于浏览器窗口的位置,固定在顶部这里top就是0,也可以自己根据需要修改。
4.z-index是堆叠顺序,跟photoshop中的图层差不多的概念,如果发现固定的导航栏被遮挡,就把数值设大点。
以上是从网上收集的资料,王桂明根据loper主题菜单导航栏的特点,特修改了CSS如下:
注:本次修改得到了拽立网博主的支持,并帮助完善和优化代码,在这里表示感谢。
1、替换管理员登录后台后的代码,前台控制面板的代码固定到顶部,如图:
把如下代码:
<div class="container"> <p class="left"> <a href="<?php bloginfo('url'); ?>/wp-admin/">控制面板</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit.php">文章</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit.php?post_type=page">页面</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit-comments.php">评论</a> <a href="<?php bloginfo('url'); ?>/wp-admin/upload.php">媒体库</a> <a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=setting.php">主题设置</a> </p> <p class="right"><?php wp_loginout() ?></p> </div |
替换为:
<div id="top2"> <div class="container"> <p class="left"> <a href="<?php bloginfo('url'); ?>/wp-admin/">控制面板</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit.php">文章</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit.php?post_type=page">页面</a> <a href="<?php bloginfo('url'); ?>/wp-admin/edit-comments.php">评论</a> <a href="<?php bloginfo('url'); ?>/wp-admin/upload.php">媒体库</a> <a href="<?php bloginfo('url'); ?>/wp-admin/themes.php?page=setting.php">主题设置</a> </p> <p class="right"><?php wp_loginout() ?></p> </div></div> |
2、固定未登录状态下,前台顶端的欢迎语及微博链接固定到顶端,如图:
把如下代码:
<div class="container"> <p class="noticebar"> <?php echo($options['notice_content']); ?> </p> <p class="snsright"> <?php if($options['feedsnscheck']) : ?> <?php if($options['feedrss'] && $options['feedrss_content']) : ?> <a href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a> <?php else : ?> <a href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a> <?php endif; ?> <?php else : ?> <?php endif; ?> <?php if($options['qqcheck'] && $options['qq_sns']) : ?> <a href="<?php echo($options['qq_sns']); ?>" title="腾讯微博" class="qqsns" rel="nofollow">腾讯微博</a> <?php else : ?> <?php endif; ?> <?php if($options['sinacheck'] && $options['sina_sns']) : ?> <a href="<?php echo($options['sina_sns']); ?>" title="新浪微博" class="sinasns" rel="nofollow">新浪微博</a> <?php else : ?> <?php endif; ?> <?php if($options['twittercheck'] && $options['twitter_sns']) : ?> <a href="<?php echo($options['twitter_sns']); ?>" title="twitter" class="twittersns" rel="nofollow">twitter</a> <?php else : ?> <?php endif; ?> <span class="right"> <?php if (!$user_ID) { if($_COOKIE["comment_author_" . COOKIEHASH]!=""){ echo "呦! ".$_COOKIE["comment_author_" . COOKIEHASH].", 又来啦,随便看看吧。 "; } else { echo "你好,欢迎光临! "; } } else { echo ""; } ?> </span> </p> </div> |
替换为:
<div id="top"> <div class="container"> <p class="noticebar"> <?php echo($options['notice_content']); ?> </p> <p class="snsright"> <?php if($options['feedsnscheck']) : ?> <?php if($options['feedrss'] && $options['feedrss_content']) : ?> <a href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a> <?php else : ?> <a href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed" class="feedsns" rel="nofollow">feed订阅</a> <?php endif; ?> <?php else : ?> <?php endif; ?> <?php if($options['qqcheck'] && $options['qq_sns']) : ?> <a href="<?php echo($options['qq_sns']); ?>" title="腾讯微博" class="qqsns" rel="nofollow">腾讯微博</a> <?php else : ?> <?php endif; ?> <?php if($options['sinacheck'] && $options['sina_sns']) : ?> <a href="<?php echo($options['sina_sns']); ?>" title="新浪微博" class="sinasns" rel="nofollow">新浪微博</a> <?php else : ?> <?php endif; ?> <?php if($options['twittercheck'] && $options['twitter_sns']) : ?> <a href="<?php echo($options['twitter_sns']); ?>" title="twitter" class="twittersns" rel="nofollow">twitter</a> <?php else : ?> <?php endif; ?> <span class="right"> <?php if (!$user_ID) { if($_COOKIE["comment_author_" . COOKIEHASH]!=""){ echo "呦! ".$_COOKIE["comment_author_" . COOKIEHASH].", 又来啦,随便看看吧。 "; } else { echo "你好,欢迎光临! "; } } else { echo ""; } ?> </span> </p> </div></div> |
3、最后是把菜单导航栏固定在顶部,如图所示:
把下面代码;
<div class="container"> <div class="hgroup"> <?php if($options['imageLogo']) : ?> <?php if( is_front_page() || is_home() ) { ?> <h1 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <a class="logo" href="<?php bloginfo('url'); ?>/"></a> <?php } else { ?> <h2 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2> <a class="logo" href="<?php bloginfo('url'); ?>/"></a> <?php } ?> <?php else : ?> <?php if( is_front_page() || is_home() ) { ?> <h1><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <?php } else { ?> <h2><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2> <?php } ?> <?php endif; ?> </div> <div class="searchbarswitch"></div> <div class="searchbar"><div class="searchfade"><?php get_search_form(); ?></div></div> <div class="clear"></div> <nav class="primary"> <?php if($options['feedrss'] && $options['feedrss_content']) : ?> <a class="feedrss" href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a> <?php else : ?> <a class="feedrss" href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a> <?php endif; ?> <?php wp_nav_menu( array('menu' => 'Header Menu','container'=>'')); ?> </nav><!--soeprimary--> <div class="clear"></div> <div class="feedtips"></div> </div> |
替换为:
<div id="topbox"> <div class="container"> <div class="hgroup"> <?php if($options['imageLogo']) : ?> <?php if( is_front_page() || is_home() ) { ?> <h1 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <a class="logo" href="<?php bloginfo('url'); ?>/"></a> <?php } else { ?> <h2 class="hidden"><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2> <a class="logo" href="<?php bloginfo('url'); ?>/"></a> <?php } ?> <?php else : ?> <?php if( is_front_page() || is_home() ) { ?> <h1><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1> <?php } else { ?> <h2><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h2> <?php } ?> <?php endif; ?> </div> <div class="searchbarswitch"></div> <div class="searchbar"><div class="searchfade"><?php get_search_form(); ?></div></div> <div class="clear"></div> <nav class="primary"> <?php if($options['feedrss'] && $options['feedrss_content']) : ?> <a class="feedrss" href="<?php echo($options['feedrss_content']); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a> <?php else : ?> <a class="feedrss" href="<?php bloginfo( 'rss2_url' ); ?>" title="<?php bloginfo('name');?> RSS Feed">rss</a> <?php endif; ?> <?php wp_nav_menu( array('menu' => 'Header Menu','container'=>'')); ?> </nav><!--soeprimary--> <div class="clear"></div> <div class="feedtips"></div> </div><!-- contasoeiner--> </div> |
/*loper主题菜单导航栏固定在顶部*/ #top { position: fixed; width: 100%; z-index: 11111; background-color: #ECECEC; border-bottom:dashed 1px #DBDBDB; } #top2 { position: fixed; width: 100%; z-index: 11111; background-color: #ECECEC; border-bottom:dashed 1px #DBDBDB; } #topbox { position: fixed; z-index: 1111; background-image:url(images/headerbg.jpg); } |
全部替换好后发现背景色有点差异,为了更完美,我们把样式表style.css的代码:
#main { background-image:url(images/bg.jpg) ;background-color:#F0F0F0; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;} |
替换为:
#main { background-color:#ECECEC; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;} |
为此全部修改完成,看看本博的效果吧!
-
学习了!原来这样呀
-
还没有Trackbacks