كود قائمة زرقاء جديد

من طرف **MR-Profawy** الجمعة يونيو 16, 2017 6:16 pm

قبل وبعد وضع الماوس على النص

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الكود:: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>تجريبيتجريبيتجريبيتجريبي</title><style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { width: auto; font-family: Raleway, sans-serif; line-height: 1; } #cssmenu > ul { background: #3db2e1; } #cssmenu > ul > li { float:right; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 16px 20px; font-size: 14px; color: #ffffff; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; background: #3db2e1; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #cssmenu > ul > li.active > a { color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #dff2fa; -webkit-transform: rotateX(90deg) translateY(-23px); -moz-transform: rotateX(90deg) translateY(-23px); transform: rotateX(90deg) translateY(-23px); -ms-transform: none; } #cssmenu > ul > li > a::before { position: absolute; top: 100%; left: 0; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 16px 20px; color: #dff2fa; background: #19799f; content: attr(data-title); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before { background: #3db2e1; } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul { width: 100%; text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center { float: none; display: block; border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover { color: #dff2fa; -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before { display: none; } #cssmenu.small-screen #menu-button { display: block; padding: 16px 20px; cursor: pointer; font-size: 14px; text-decoration: none; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; background: #3db2e1; } #cssmenu.small-screen #menu-button:after { content: ""; position: absolute; right: 20px; top: 17px; display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; width: 22px; height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after { border-top: 2px solid #dff2fa; border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before { content: ""; position: absolute; right: 20px; top: 27px; display: block; width: 22px; height: 2px; background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before { background: #dff2fa; } </style> <div id="cssmenu"> <ul> <li class="active"> <a href="#">تجريبي</a> </li> <li> <a href="#">تجريبي</a> </li> <li> <a href="#">تجريبي</a> </li> <li> <a href="#">تجريبي</a> </li> </ul> </div>