Witam
stworzylem menu ktore powinno pokazywac rozne kolory tla w zaleznosci od tego na jaki element aktywny najedziemy myszka oraz jaka jest aktualna szerokosc okna przegladarki, niestety nie dziala tak jak powinno.
bede wdzieczny za jakiekolwiek sugestie.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>title</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="enquire.min.js"></script>
<script src="js/main.js"></script>
<style>
#menu-wrapper{
width: 500px;
height: 145px;
float:left;
border-color: black;
border-width: medium;
border-style: solid;
}
</style>
<script>
$(function() {
// cache body for speed
var $body = $("body");
// DRY up handler creation
function handlerFactory() {
return {
match : function() {
$("#menu-wrapper").css("background-color", "aqua");
$("#menu-wrapper div ul li a[mouse_over1|='menu1']").mouseover(function(){
$("#menu-wrapper").css("background-color: red;");
})
$("#menu-wrapper div ul li a[mouse_over2|='menu2']").mouseover(function(){
$("#menu-wrapper").css("background-color: deepskyblue;");
})
$("#menu-wrapper div ul").mouseleave(function(){
$("#menu-wrapper").css("background-color", "aqua");
})
},
unmatch : function() {
$("#menu-wrapper").css("background-color: bisque;");
$("#menu-wrapper div ul li a[mouse_over1|='menu1']").mouseover(function(){
$("#menu-wrapper").css("background-color: darkblue;");
})
$("#menu-wrapper div ul li a[mouse_over2|='menu2']").mouseover(function(){
$("#menu-wrapper").css("background-color: darkgray;");
})
$("#menu-wrapper div ul").mouseleave(function(){
$("#menu-wrapper").css("background-color: bisque;");
})
}
};
}
// hook up our "media queries"
enquire
.register("screen and (max-width : 768px)", handlerFactory())
.listen();
});
</script>
</head>
<body>
<div id="menu-wrapper">
<div>
<ul>
<li class="menu1"><a href="#" mouse_over1="menu1">menu1</a>
<ul class="sub-menu1">
<li><a href="#">sub-menu1</a></li>
</ul>
</li>
<li class="menu2"><a href="#" mouse_over2="menu2">menu2</a>
<ul class="sub-menu2">
<li><a href="#">sub-menu2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
pozdrawiam
Ba