WhatIsHTML
-
Posts
81 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by WhatIsHTML
-
Я пытался, но там не появляется фиксированное меню вверху, поэтому выложил так Проблему решил заменой ссылки "#" на "javascript:void(0)". Т.о. при нажатии окно не прокручивается, а остается на месте Не знаю стоит ли создавать новую тему, но обнаружил следующую проблему: в FF не появляется фиксированное меню при прокрутке страницы. Ошибок JS нет, а почему не появляется - без понятия... Структура осталась та же
-
Привет всем, помогите пожалуйста. Есть главное меню. При прокрутке страницы вниз появляется фиксированное меню, в котором есть кнопка. По клике на нее открывается как бы главное меню, но теперь уже ПОД фиксированным. Главное меню содержит еще подменю иначе проблемы и не было бы. Как думал я: 1. По клике на кнопку в фикс. меню добавляем классы "fix navbar-fixed-top" к нашему главному меню. fix придает некоторые отличия по цвету, а navbar-fixed-top - фиксирует элемент вверху окна браузера. 2.Чтобы главное меню отображалось ПОД фиксированным, я придумал сделать отступ на высоту самого фикс. меню. Подозреваю, что не лучшее решение, но по-другому не придумал. 3. Главное меню исчезает при прокрутке страницы хоть на пиксель. Я решил, удалять классы "fix navbar-fixed-top" при прокрутке страницы. Аналогичные действия я проделал и для подменю,но поскольку вменю я нажимаю на ссылку (в данном случае "#"), то страница возвращается в исходное положение и подменю исчезает из-за скроллинга. Надо либо как-то сделать так, чтобы страница не прокручивалась, либо действовать другими методами. В песочнице не смог воспроизвести все необходимые эффекты, поэтому прикрепляю архив,чтобы было нагляднее. https://yadi.sk/d/S1EOVNxonmcxL <!doctype html><html><head> <meta charset="utf-8"> <title>Main</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link href="css/custom.css" rel="stylesheet"></head><body><div class="fluid-container"> <header> <!--main menu--> <div class="menu" id="menu"> <div class="container"> <div class="row"> <div class="col-xs-12"> <nav> <ul> <li><a href="#">ГЛАВНАЯ</a></li> <li><a href="#" class="button-project">ПРОЕКТЫ</a></li> </ul> </nav> </div> </div> </div> </div><!--end main menu--> <!--main fix menu--> <div id = "fixMenu" class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row" > <div class="col-xs-4"> <button type="button" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> </div> <!--end main fix menu--> <!--project menu--> <div class="menu-projects"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul> <li><a href="#">ДОМА</a></li> </ul> </div> </div> </div> </div> <!--end project menu--> </header> <!--Some text--> <div class="wrap-content"></div></div> <!-- end fluid-container --> <!-- javascript --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script></body></html>body{ height: 100%;}ul{ list-style: none; margin: 0px; padding: 0px;}li, a{ display: inline-block;}a{ text-decoration: none; font-size: 18px; padding: 8px 30px;}.fluid-container, .container{ min-width: 970px;}.wrap-content{ content: ""; height: 2024px;}.navbar-toggle { display: block; float: left;}/* Default Menu style*/.menu{ background-color: #ffa;}/* Projects Menu style*/.menu-projects{ display: none;}/* fix menu style*/#fixMenu{ display: none;}.fix{ background: #fad;}.menu.fix{ top: 50px;}.menu-projects.fix{ top: 100px;}$(document).ready(function(){ //show/hide project menu $(".button-project").click(function(e){ e.stopPropagation(); $(".menu-projects").show(); $(".search-menu").hide(); }); $(".menu-projects").click(function(e){ e.stopPropagation(); }); $('body').click(function(){ $(".menu-projects").hide(); }); //top fix menu var $fixmenu = $("#fixMenu"); var $fixrow = $('.menu'); var $fixproject = $('.menu-projects'); $(window).scroll(function(){ if ( $('body').scrollTop() > 50){ $fixmenu.show(); } else if($('body').scrollTop() <= 50) { $fixmenu.hide(); } //delete fix row after scroll //$fixrow.removeClass("fix navbar-fixed-top"); //$fixproject.removeClass("fix navbar-fixed-top"); //show fix menu row after click $(".navbar-toggle").click(function(e){ $fixrow.addClass("fix navbar-fixed-top"); $fixrow.show(); }); //ПРОБЛЕМА ТУТ //show second fix menu row $(".button-project").click(function(e){ $fixproject.addClass("fix navbar-fixed-top"); $fixproject.show(); }); });});
-
Спасибо еще раз всем, кто потратил время.
-
toggle открывает и закрывает по клику на один и тот же элемент, а в задании элементы открытия и закрытия разные. Возможно сделаю toggle, если не разберусь как надо, но в образце результат другой. Хотя, если так подумать, то оно вроде как и через тоггл приемлемо. Спасибо, но меню прячется даже если кликнуть на нем, что не очень хорошо... У меня проблема с составлением селектора, который отвечал бы условию : любая область кроме меню (.menu-projects). Вроде должно работать с таким селектором 'body:not(.menu-projects)', но увы...
-
Задание: По клику на ссылку появляется меню. По клику в любом другом месте кроме, области меню, оно должно "прятаться". Меню появляется, но не "прячется". В поиске наткнулся на такой метод как not(), но реализовать все равно не смог. Возможно не через него надо делать(?). Помогите, пожалуйста. //#button-project - ссылка, по клику которой, появляется меню.//.menu-projects - меню.$(document).ready(function(){ $("#button-project").click(function(){ $(".menu-projects").show(); }); $("not(.menu-projects)").click(function(){ $(".menu-projects").hide(); }); });
-
Выравнивание по правому краю родительского элемента
WhatIsHTML replied to WhatIsHTML's question in HTML Coding
Спасибо -
http://www.cssdesk.com/pHc4m Нужно параграф разместить поверх баннера справа с помощью float (учебное задание). Объясните, пожалуйста, что не пропускает параграф вверх?