仿淘宝首页分类列表效果实现代码

Untitled Document

body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}
a{color:blue;}
ul{margin:0;padding:0;list-style:none;}
#navigation{height:26px;}
#navigation li{float:left;}
#navigation li.show .content{display:block;}
#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}
#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}
#container{position:relative;width:800px;margin:50px;}
#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}
#navigation li .content ul li{margin-right:10px;float:none;display:inline;}
#navigation li .content ul li a{border:none;}
#navigation li .content ul li{width:120px;}
#navigation li .content ul li h3{clear:both;text-align:left;}

  • 拼音索引
  • A

    阿里山

    • 阿里山
    • 阿里山
    • 阿里山
    • 阿里山
    • 阿里山
    • 阿里山

    阿里山

    • 阿里山
    • 阿里山
    • 阿里山
    • 阿里山
  • B

    棒棒糖

    • 棒棒糖
    • 棒棒糖
    • 棒棒糖
    • 棒棒糖
    • 棒棒糖
    • 棒棒糖

    棒棒糖

    • 棒棒糖
    • 棒棒糖
    • 棒棒糖
    • 棒棒糖
  • C

    C
  • D

    D
  • E

    E
  • F

    F
  • G

    G
  • H

    H
  • I

    I
  • J

    J
  • K

    K
  • L

    L
  • M

    M
  • N

    N
  • O

    O
  • P

    P
  • Q

    Q
  • R

    R
  • S[sh]

    S
  • T

    T
  • U

    U
  • V

    V
  • W

    W
  • X

    X
  • Y

    Y
  • Z[zh]

    Z

function showAjaxContent(){
var obj=document.getElementById("navigation");
var liObj=obj.getElementsByTagName("li");
var length=liObj.length;
var currentLiObj;
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 仿淘宝首页分类列表效果实现代码

    Untitled Document body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;

  • Java仿淘宝首页分类列表功能的示例代码

    Java仿淘宝首页分类列表功能的示例代码

    在之前的博文中,我们已经完成了用户模块的所有的功能,那么在接下来的几篇博文中,我们来完成分类管理功能模块. 先来看一下后台的分类管理都有哪些功能点 后台品类管理其实就是对商品的一个管理,主要分为增加品类.更新品类名称.获取同级品类结点和获取品类id及子节点品类 一.分类管理模块-增加品类功能的实现 先来看Service层 // 添加品类 public ServerResponse addCategory(String categoryName, Integer parentId){ if(par

  • Android仿淘宝首页头条View垂直滚动效果

    Android仿淘宝首页头条View垂直滚动效果

    之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向上滚动,也就是类似淘宝首页头条的那种滚动,所以就按照那个思路想了系啊,可以把View拿来滚动,这样可以自己随意的修改View里面的内容,还比较简单一些.所以这个整个思路就是把View就行循环滚动. 看一下循环滚动View的内容咋写的吧,非常简单. package com.dreamlive.upma

  • Android仿淘宝商品详情页效果

    Android仿淘宝商品详情页效果

    本文实例为大家分享了Android仿淘宝商品详情页的具体代码,供大家参考,具体内容如下 Demo地址:先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件 <LinearLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="72dp" android:paddingTop="24

  • 微信小程序淘宝首页双排图片布局排版代码(推荐)

    效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class="taobaolist"> <block wx:for="{{imagelist}}" wx:key="item"> <view class="taobao-list"> <view class="

  • CSS仿淘宝首页导航条布局效果

    以下是CSS内容部分: /*子鼠*/ body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;} div,img{margin:0; padding:0; border:0;} ul,li{list-style-type: none; margin:0; padding:0; float:left; } #info{ margin-left:auto; margin-right:auto;widt

  • 原生js仿淘宝网商品放大镜效果

    原生js仿淘宝网商品放大镜效果

    效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:

  • jQuery实现级联菜单效果(仿淘宝首页菜单动画)

    相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧.今天我们就带大家体会一下级联菜单的显示.小编我只是实现了简单地效果,不过总体来说原理是一样的哦,那么先让大家看看效果图吧. 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了,先上html和css的代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>menu.html</title> <m

  • Android ViewDragHelper仿淘宝拖动加载效果

    Android ViewDragHelper仿淘宝拖动加载效果

    拖动加载是我在淘宝的商品详情界面发现的,感觉很实用.于是就分析它的实现方式,感觉用ViewDragHelper可以很方便的实现这种效果.下面大致把我的思路分步骤写一下.先上图吧. 首先建工程什么的我就不多说了.咱从ViewDragHelper的实现开始说吧,ViewDragHelper一般用在一个自定义ViewGroup的内部,可以对其子View进行移动操作. 创建自定义ViewGroup: package com.maxi.viewdraghelpertest.widget; import a

  • Android仿淘宝切换商品列表布局效果的示例代码

    Android仿淘宝切换商品列表布局效果的示例代码

    最近电商项目中有这样一个需求,就是在进入商品列表界面,有一个按钮可以切换商品列表的布局(网格或者垂直列表排列). 效果图: 上面两幅图分别是点击右上角按钮后显示两种不同布局的效果.简单的流程可以概括为:第一次进入页面,有个默认的布局(网格布局),点击按钮,由网格布局切换到竖直的线性布局,再次点击切换到网格布局. 分析: 可以看到商品展示的形式都是以列表的方式来展现,我用的是RecyclerView,这种列表并不复杂,配合Adapter数据适配器就实现了. 提出这个需求时,问了朋友,他说使用了两个

随机推荐