网页右边导航栏

女爷i 2022-05-23 05:13 237阅读 0赞

项目要求写导航栏 做个记录方便以后用到。

效果大致是 鼠标移上就出来 ，移走就半隐藏。

![2018060217070657][]

效果就是这样。 废话少说 上代码

css ：

.div-xuanfu1, .div-xuanfu2, .div-xuanfu3\{  
                z-index: 999;  
               position: absolute;  
                width: 100px;  
                height:100px;  
                border-radius: 50px;  
                background-color: \#F16412;  
                margin-top: 100px;  
                color:white;  
                line-height:100px;  
                text-align: center;  
                right:-50px;  
                font-size: 20px;  
            \}  
             .div-xuanfu1\{  
                 top:100px;  
            \}  
            .div-xuanfu2\{  
                 top:200px;  
            \}  
             .div-xuanfu3\{  
                 top:300px;

\}

html5:

<div id="xuanfu" class="div-xuanfu1">  
                         质询  
                     
    </div>  
      
    <div id="xuanfu2" class="div-xuanfu2">  
                         查询  
                     
    </div>  
     <div id="xuanfu3" class="div-xuanfu3">  
                         测试  
                     
    </div>

js :

<script src="js/jquery-1.9.0.js"></script>

<script type="text/javascript">

var docWidth = document.documentElement.clientWidth;  
    var bodywidth = document.body.clientWidth;  
        $(document).ready(function () \{  
            $(window).scroll(function () \{  
                var Headerheight = $("\#Header").height();  
                console.log("Headerheight",Headerheight);  
                if ($(window).scrollTop() >= Headerheight) \{  
                $("\#xuanfu").css("top", $(window).scrollTop());      
                $("\#xuanfu2").css("top", $(window).scrollTop() + 100);      
                $("\#xuanfu3").css("top", $(window).scrollTop() + 200);      
                \}else \{  
                    $("\#xuanfu").css("position", "absolute");  
                \}  
            \});  
        \});          
        $(function()\{  
  $("\#xuanfu").mouseover(function()\{  
   $(this).animate(\{width:"100px",right:0\},500);  
  \}).mouseout(function()\{  
   $(this).animate(\{width:"100px",right:-50\},500);  
  \});  
    
   $("\#xuanfu2").mouseover(function()\{  
   $(this).animate(\{width:"100px",right:0\},500);  
  \}).mouseout(function()\{  
   $(this).animate(\{width:"100px",right:-50\},500);  
  \});  
    
    $("\#xuanfu3").mouseover(function()\{  
    $(this).animate(\{width:"100px",right:0\},500);  
  \}).mouseout(function()\{  
   $(this).animate(\{width:"100px",right:-50\},500);  
  \});

\});

</script>

[2018060217070657]: /images/20220523/97b0c748cece4929864f2146279e87fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 css导航栏_使用CSS的导航栏

css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing

系统管理员/ 2023年03月05日 10:59/ 0 赞/ 4 阅读

相关 Bootstrap导航栏

1.表格导航或标签：创建一个标签式的导航菜单 ![这里写图片描述][20160612152626775] 以一个带有class.nav的无序列表开始

客官°小女子只卖身不卖艺/ 2022年08月23日 08:42/ 0 赞/ 263 阅读

相关网页顶部横向导航栏的制作(最最基本的导航栏)

注意：该文章实现的导航效果是最基本的那种，没有加任何的js代码，纯粹使用html标签+css样式实现的。 html代码： <div class=

小咪咪/ 2022年06月17日 01:39/ 0 赞/ 286 阅读

相关 bootstrap页面左侧导航栏右侧网页

我们在浏览网页的时候，左侧导航栏，右侧网页的页面很常见，那么你有好奇过那些炫酷好看的页面是怎么做的吗？下面小编带你了解一下这种页面是怎么做的。

浅浅的花香味﹌/ 2022年06月03日 03:53/ 0 赞/ 244 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 386 阅读

相关网页右边导航栏

项目要求写导航栏做个记录方便以后用到。效果大致是鼠标移上就出来，移走就半隐藏。 ![2018060217070657][] 效果就是这样。废话少说上

女爷i/ 2022年05月23日 05:13/ 0 赞/ 238 阅读

相关 Bootstrap 导航栏

一、导航元素 1、导航标签并添加标签页注意 .nav-tabs 类依赖 .nav 基类。 <div class="container">

妖狐艹你老母/ 2022年04月23日 08:02/ 0 赞/ 369 阅读

相关如何制作网页的快捷导航栏部分？

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

快来打我*/ 2021年12月13日 22:17/ 0 赞/ 365 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 499 阅读

相关 CSS固定定位生成网页顶部导航栏实例

固定定位 position:fixed 固定定位是相对与浏览器窗口来定位, 就算页面滚动, 固定定位元素的位置不会变固定定位元素脱离了标准文档流, 会雅盖主标准文档流

迈不过友情╰/ 2021年10月19日 10:12/ 0 赞/ 426 阅读