Javascript implements simple navigation bar
|
This article shares the specific code of Javascript to implement a simple navigation bar for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Navigation</title>
</head>
<style>
button{
width:80px;
height:25px;
border:none;
}
#b1{
background-image: url('1.png');
margin-right:0px;
}
#b2{
background-image: url('1.png');
width:380px;
height:25px;
text-align: left;
}
#b1:hover{
background-image: url('2.png');
}
#b2:hover{
background-image: url('2.png');
}
</style>
<body>
<div style="width: 800px;margin:0px auto">
<div>
<img src="1.jpg" width="100%" height="150px%">
</div>
<div>
<div style="font-size: 1px">
<button type="button" id="b1">Homepage</button>
<button type="button" id="b1">Website News</button>
<button type="button" id="b1">Website Fun</button>
<button type="button" id="b1">Website Forum</button>
<button type="button" id="b1">Website Introduction</button>
<button type="button" id="b2">Recruit talents</button>
</div>
</div>
</div>
</body>
</html>Effect picture:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Mysql Workbench query mysql database method
>>: KTL tool realizes the method of synchronizing data from MySQL to MySQL
Recommend
N ways to center elements with CSS
Table of contents Preface Centering inline elemen...
JavaScript realizes magnifying glass special effects
The effect to be achieved: When the mouse is plac...
Detailed explanation of TypeScript's basic types
Table of contents Boolean Type Number Types Strin...
Detailed steps to install web server using Apache httpd2.4.37 on centos8
Step 1: yum install httpd -y #Install httpd servi...
Linux kernel device driver address mapping notes
#include <asm/io.h> #define ioremap(cookie,...
A brief discussion on logic extraction and field display of Vue3 in projects
Table of contents Logical Layering Separate busin...
In-depth analysis of MySQL explain usage and results
Preface In daily work, we sometimes run slow quer...
Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV
Since the introduction of the contentEditable attr...
Problems with Vue imitating Bibibili's homepage
Engineering Structure The project is divided into...
Understanding of CSS selector weight (personal test)
Copy code The code is as follows: <style type=...
Detailed usage of js array forEach instance
1. forEach() is similar to map(). It also applies...
Solution to the problem of MySQL thread in Opening tables
Problem Description Recently, there was a MySQL5....
Analysis of the configuration process of installing mariadb based on docker
1. Installation Search the mariadb version to be ...
Detailed explanation of MySQL 5.7.9 shutdown syntax example
mysql-5.7.9 finally provides shutdown syntax: Pre...
CSS realizes corner cutting + border + projection + content background color gradient effect
Simply use CSS to achieve all the effects of corn...