Home > Article > Web Front-end > Implement adaptive width menu with CSS (code example)

Implement adaptive width menu with CSS (code example)

云罗郡主Original: 2018-11-26 15:28:292374browse

The content of this article is about implementing adaptive width menus with CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This is an adaptive width button effect code based on CSS. You can say that this effect is a menu, or you can say that it is an example of how to write a CSS button. I wonder if you have discovered that menu items The length and width can adapt to the amount of text. The more text, the longer it is, and the less text, the shorter it is. It's very smart. An adaptive menu like this has greatly enhanced practicality, and the code is also quite concise. I would like to share it with you for your reference.

The specific code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>按钮</title>
</head>
<body>
<style type="text/css">
.nav{overflow:hidden;position:absolute;}
.nav a{ margin:0 2px;float:left;line-height:24px;text-decoration:none;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ebeaea));background:-moz-linear-gradient(top, #f4f4f4,#ebeaea);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4,endColorstr=#ebeaea,grandientType=1); border:solid 1px #cccdce;color:#333; font-weight:bold;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.nav a span{display:inline-block;padding:0 22px; border:solid 1px #fff;cursor:pointer;}
.nav a:hover{text-decoration:none;color:#fff;background:-webkit-gradient(linear, 0 0, 0 100%, from(#ef2b10), to(#d91c02));background:-moz-linear-gradient(top, #ef2b10,#d91c02);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ef2b10,endColorstr=#d91c02,grandientType=1); border:solid 1px #ce2100;}
.nav a:hover span{border:solid 1px #fa6058;}
</style>
<div class="nav">
<a href="#"><span>首页</span></a>
<a href="#"><span>网站首页</span></a>
<a href="#"><span>CSS</span></a>
<a href="#"><span>CSS布局</span></a>
<a href="www.php.cn"><span>CSS布局</span></a>
<a href="#"><span>CSS布局</span></a>
</div>
</body>
</html>

The effect is as follows:

Implement adaptive width menu with CSS (code example)

The above is a complete introduction to the CSS menu that implements adaptive width. If If you want to know more about CSS tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Implement adaptive width menu with CSS (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use counter to automatically number elements in css? Use of css counter (code example)Next article：How to use counter to automatically number elements in css? Use of css counter (code example)

See more

Implement adaptive width menu with CSS (code example)

Related articles