Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • This Menu Turns Into A When Window Is Less Than 960px To Conserve Space

    Загружено:

    rupeshkumarinfo
    11 просмотров3 страницы
    CSS-Tricks Example this menu turns into a when window is less than 960px to conserve space.

    Исходное описание:

    Оригинальное название

    Css

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    CSS-Tricks Example this menu turns into a when window is less than 960px to conserve space.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    11 просмотров3 страницы

    This Menu Turns Into A When Window Is Less Than 960px To Conserve Space

    Загружено:

    rupeshkumarinfo
    CSS-Tricks Example this menu turns into a when window is less than 960px to conserve space.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 3

    ===========================CSS-Tricks=============================================

    CSS-Tricks Example

    This menu turns into a <select> when window is less than 960px to conserve space.

    Home Books Blog About Us Support

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Convert Menu to Dropdown</title> <style> * { margin: 0; padding: 0; } h1 { font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; width: 500px; margin: 0 auto 15px; } nav { display: block; width: 960px; margin: 100px auto; text-align: center; } nav ul { list-style: none; } nav li { display: inline-block; } nav a {

    display: inline-block; background: #333; color: white; padding: 5px 15px; border: 1px solid white; text-decoration: none; } nav a:hover { border: 1px solid red; background: red; } nav a:active { background: blue; } nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } } </style> <!-- You COULD just put both menus in the markup, but if you don't like that, this is how you could dynamically create it with jQuery. --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></scrip t> <script> // DOM ready $(function() { // Create the dropdown base $("<select />").appendTo("nav"); // Create default option "Go to..." $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("nav select"); // Populate dropdown with menu items $("nav a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("nav select"); }); // To make dropdown actually work

    // To make more unobtrusive: http://css-tricks.com/4064unobtrusive-page-changer/ $("nav select").change(function() { window.location = $(this).find("option:selected").val(); }); }); </script> </head> <body> <div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSSTricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="/13303-convert-menu-to-dropdown/"> Back to Article</a> <a class="header-button" href="/examples/">More Demos </a></div><div id="demobar-ad"><div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div> <nav> <h1>This menu turns into a <select> when window is less than 960px to conserve space.</h1> <ul> <li><a <li><a <li><a <li><a <li><a </ul> </nav> </body> </html> href="#" class="active">Home</a></li> href="#books">Books</a></li> href="#blog">Blog</a></li> href="#about">About Us</a></li> href="#support">Support</a></li>

    Вам также может понравиться