JavaScript 模倣京東ナビゲーション左カテゴリナビゲーションドロップダウンメニューeffect

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 模倣京東ナビゲーション左カテゴリナビゲーションドロップダウンメニューeffect_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:08 PM

この記事の例では、参考のために、JD.com と Taobao Mall の左側のカテゴリナビゲーションに似たドロップダウンメニューを共有します。

レンダリング:

実装コード:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
   *{margin:0;padding:0;}
   .ul{position:relative;width:200px;height:auto;} 
   .ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}
   .ul li a{display:block;background:#fff;color:#000;text-decoration:none;}
   .ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}
   .ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}
   .ul li div dl dd{float:left; width:100px;}
   .ul .liname div{display:block;}
  </style>
  <script>
    window.onload=function(){
      var aLi=document.getElementsByTagName("li");
      for(var i=0;aLi.length>i;i++){
        aLi[i].i=i;
        aLi[i].onmouseover=function(){
          this.className="liname";
  
          var h1=this.i*25;
          var h2=this.getElementsByTagName("div")[0].offsetHeight;
          if(h2<h1){
            this.getElementsByTagName("div")[0].style.top=h1+'px';
          }
            
        }
        aLi[i].onmouseout=function(){
          this.className="";
        }
      }
    }
  </script>
</head>
<body>
  <ul class="ul">
    <li>
      <a href="">类别1</a>
      <div class="div">
        <dl>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
    </li>
    <li>
    <a href="">类别2</a>
      <div class="div">
        <dl>
          <dd>类别2</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
    </li>
    <li><a href="">类别3</a><div class="div">
        <dl>
          <dd>类别3</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
    <li><a href="">类别4</a><div class="div">
        <dl>
          <dd>类别4</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
    <li><a href="">类别5</a><div class="div">
        <dl>
          <dd>类别5</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
    <li><a href="">类别6</a><div class="div">
        <dl>
          <dd>类别6</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
    <li><a href="">类别7</a><div class="div">
        <dl>
          <dd>类别7</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
    <li><a href="">类别8</a><div class="div">
        <dl>
          <dd>类别8</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
          <dd>类别1</dd>
        </dl>
      </div>
      </li>
  </ul>
</body>
</html>

ログイン後にコピー

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7728

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。