منوی واکنش گرای بالای صفحه
بازگشت به صفحه اصلی
بازگشت به صفحه مقاله
دو ستونی
دو سطری
اجرای کد RUN »
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: right;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} } </style> </head> <body> <ul class="topnav"> <li><a class="active" href="#home">خانه</a></li> <li><a href="#news">اخبار</a></li> <li><a href="#contact">ارتباط با ما</a></li> <li class="right"><a href="#about">درباره ما</a></li> </ul> <div style="direction:rtl;padding:0 16px;"> <h2>مثالی از منوی واکنش گرای بالای صفحه</h2> <p>در این مثال از کوئری media تا زمانی که اندازه صفحه نمایش 600پیکسل را کمتر باشد ، منو در بالا به صورت عمودی قرار بگیرد.</p> <p>بعد ها در درس مربوطه ، در مورد کوئری ها یاد خواهید گرفت.</p> <h4>اندازه صفحه را تغییر دهید تا نتیجه را ببینید</h4> </div> </body> </html>