WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
नेविगेशन पट्टी
894
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
26 March 2025
jQuery और CSS3 का उपयोग करके प्रगति पट्टी के साथ बहु-चरणीय फ़ॉर्म
10 September 2024
जादू नेविगेशन मेनू | code_wars_official
7 July 2025
नेविगेशन मेनू संकेतक
HTML
Copy
<navrotatebt id="nojquery"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Tutoriel</a></li> <li><a href="#">Contact</a></li> </ul> </navrotatebt>
CSS
Copy
navrotatebt { max-width: 900px !important; margin: 100px auto; margin-top: 20px; } navrotatebt ul { list-style: none; overflow: hidden; } navrotatebt li a { background: #d8d8d8; border-right: 1px solid #fff; color: #fff; display: block; float: left; font: 400 13px "Montserrat Alternates", Arial; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 80px; -webkit-transition: transform 1s; -moz-transition: transform 1s; } navrotatebt#nojquery li a:hover, .rotate { -moz-animation: animrotate 2s; -webkit-animation: animrotate 2s; background: #222; } @-moz-keyframes animrotate { 100% { background: blue; -moz-transform: perspective(200px) rotateY(360deg); } } @-webkit-keyframes animrotate { 100% { background: blue; -webkit-transform: perspective(200px) rotateY(360deg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
