Ciężkim krokiem idę do przodu, próbując i rozważając mozliwośći.
Na razie się wkopałem...menu nie działa poprawnie :)
Prośba o sprawdzenie kodu, co źle i jak lepiej lo zrobić ;)
......................................HTML
<!Doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="LOWELLA - ubrania z klasa ">
<meta name="keywords" content="koszule, bluzy, kurtki, czapki">
<meta name="author" content="crol">
<meta http-equiv="refresh" content="10">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<title>Lowella</title>
<body>
<div id="content">
<div id="menu">
<div id="logo"></div>
<div class="nav col-6 ">
<ol>
<li><a href="#">link1</a>
<ul>
<li><a href="#"> link 1.1 </a></li>
<li><a href="#"> link 1.2 </a></li>
<li><a href="#"> link 1.3 </a></li>
<li><a href="#"> link 1.4 </a></li>
</ul>
</li>
<li><a href="#">link2</a>
<ul>
<li><a href="#"> link 1.1 </a></li>
<li><a href="#"> link 1.2 </a></li>
<li><a href="#"> link 1.3 </a></li>
<li><a href="#"> link 1.4 </a></li>
</ul>
</li>
<li><a href="#">link3</a>
<ul>
<li><a href="#"> link 1.1 </a></li>
<li><a href="#"> link 1.2 </a></li>
<li><a href="#"> link 1.3 </a></li>
<li><a href="#"> link 1.4 </a></li>
</ul>
</li>
<li><a href="#">link4</a>
<ul>
<li><a href="#"> link 1.1 </a></li>
<li><a href="#"> link 1.2 </a></li>
<li><a href="#"> link 1.3 </a></li>
<li><a href="#"> link 1.4 </a></li>
</ul>
</li>
<li><a href="#">link5</a>
<ul>
<li><a href="#"> link 5.1 </a></li>
<li><a href="#"> link 5.2 </a></li>
<li><a href="#"> link 5.3 </a></li>
<li><a href="#"> link 5.4 </a></li>
</ul>
</li>
</ol>
</div>
</div>
<div style="clear:both"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis non nulla eget ultricies. Cras eget dolor id diam mattis tincidunt. Fusce ut mi dolor. Etiam nec nunc non ipsum ultrices vulputate at ut elit. Integer consectetur malesuada dui quis rutrum. Curabitur mi mauris, consectetur lobortis nulla a, lobortis ornare dui. Proin nec convallis magna, semper faucibus purus. Nam sed quam ut diam molestie eleifend. Phasellus lobortis consectetur tellus feugiat rhoncus. Integer massa sapien, egestas et justo in, porta ullamcorper nibh. Proin facilisis faucibus leo nec blandit. Aliquam sit amet arcu ac mauris facilisis molestie quis non tortor. Mauris nec nunc ac nulla aliquet rutrum eu at dolor.
Nam id felis nec est laoreet posuere. Mauris non augue ullamcorper, fermentum leo vitae, auctor ipsum. Integer ut hendrerit metus. Fusce vitae erat massa. Suspendisse gravida odio sed mauris euismod, ut interdum dui tincidunt. Integer facilisis dui ac lorem fringilla convallis. Morbi aliquam, sapien fermentum fermentum aliquam, neque magna faucibus leo, quis ultricies dolor leo et nunc. Ut gravida eros diam, vitae volutpat augue eleifend eu. Nam lacus dui, posuere ac est ac, aliquet convallis mauris.
Nam vulputate dolor metus, in fermentum tellus varius ut. Nam tempus erat ac enim laoreet molestie. Quisque id malesuada felis. Sed fermentum lobortis purus, id elementum nisl condimentum a. Pellentesque ac risus libero. Maecenas et augue sed est commodo gravida id sed eros. Aliquam ornare porttitor massa nec malesuada. Nullam scelerisque molestie sapien at cursus.
Nunc non laoreet urna. Nam faucibus nunc a nibh sodales gravida. Proin molestie metus lorem, et consectetur eros rutrum a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida felis non congue semper. In tincidunt quam nec leo sodales, sit amet faucibus tellus finibus. Quisque lectus nulla, ultricies ac lectus ac, mattis euismod ante. Integer eros justo, fringilla sed pellentesque sed, iaculis a leo. Nunc mollis rhoncus auctor. Nam venenatis urna et sapien sollicitudin fringilla. Ut nec cursus risus. Sed tristique non nisl vitae porttitor.
In elementum sed dolor ac volutpat. Vivamus finibus arcu elit, tempus commodo turpis dictum ac. Aenean egestas euismod metus, sed tristique sapien scelerisque non. Nunc lorem elit, vulputate at lorem sagittis, pharetra finibus augue. Praesent eleifend sagittis lacus et egestas. Donec porta odio eu nisi placerat, ac tempor tellus tempor. Proin dapibus leo tortor, in facilisis enim vehicula a. Aenean non pretium ante, id egestas metus. Sed aliquet sem id nisl finibus, eget accumsan ante consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus.
In volutpat mauris nec elit viverra, et gravida nunc placerat. Integer varius ultricies ornare. Fusce suscipit aliquam nunc, nec placerat orci porta id. In eget mattis orci. Integer in enim mauris. Etiam sit amet enim sit amet diam fermentum sagittis. Fusce nibh ipsum, porta sed venenatis vel, auctor a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum molestie ut lacus ut dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ex enim, sodales pharetra blandit non, mattis ut ex.
Morbi placerat purus non laoreet tincidunt. Integer sapien ligula, ullamcorper et pulvinar eget, venenatis eu justo. Vestibulum imperdiet facilisis velit non pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi vitae maximus justo. Quisque a quam in ex vehicula commodo. Nunc feugiat bibendum ante ac semper. Aenean vel eleifend sem. Donec vitae orci odio. Mauris vehicula leo sem. Praesent vehicula, lorem venenatis pulvinar posuere, nibh ex gravida tellus, sed feugiat lorem nisl sit amet lacus.
Ut iaculis scelerisque euismod. Praesent sagittis purus eu velit lobortis, a ultrices nulla elementum. Quisque eu turpis imperdiet eros ornare cursus in non elit. Donec tristique risus vitae orci consequat, a dignissim metus tempor. Sed auctor dolor ac risus vehicula viverra. Sed nec velit diam. Maecenas fermentum iaculis ipsum, id dapibus leo imperdiet vitae. In sollicitudin mattis sapien, id sagittis mauris efficitur sed.
In et ullamcorper sapien, et luctus est. Proin vel odio tellus. Mauris sollicitudin fringilla dui, eu rutrum sapien placerat in. Morbi consequat ipsum in massa convallis blandit. Donec ac gravida dolor. Nulla id tortor libero. Nullam dignissim molestie enim, viverra pulvinar nisl accumsan accumsan. Aenean ligula orci, viverra ut pretium ac, bibendum sed enim. Proin sagittis dictum orci et consequat. Donec tempor elit eget interdum aliquam. Integer suscipit semper purus, quis viverra augue lobortis quis. Nullam lobortis condimentum enim eget elementum. Aliquam mauris tortor, congue ultricies accumsan eget, porta non odio. Ut consectetur diam eros, id maximus sapien pellentesque gravida. Nunc interdum felis ut iaculis rutrum.
Sed id luctus dolor. Integer posuere lectus sed ullamcorper tristique. Vestibulum nulla ex, laoreet et erat sit amet, consectetur maximus libero. Vestibulum blandit sem nec libero imperdiet suscipit. Suspendisse urna neque, luctus eu purus quis, tempor porta est. Maecenas malesuada mollis purus sed interdum. Morbi posuere egestas elit in commodo. Duis euismod ligula mauris, ac porttitor sem scelerisque vulputate. Aenean aliquam magna orci, et vestibulum arcu rutrum et. Aliquam efficitur luctus maximus. In posuere eros vehicula gravida viverra.
</div>
</div>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
var stickyNavTop = $('#menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#menu').addClass('sticky');
} else {
$('#menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</head>
</html>
......................................CSS
*
{
margin: 0px;
padding: 0px;
outline: 0px;
box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body
{
background-color: #363636;
font-family: 'PT Sans', sans-serif;
color: white;
}
/* tu chyba responsywności strony width wewnetrzego diva nie będzie przeszkadzał? */
#content
{
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
-webkit-box-shadow: 7px 10px 9px -6px rgba(0,0,0,0.27);
-moz-box-shadow: 7px 10px 9px -6px rgba(0,0,0,0.27);
box-shadow: 7px 10px 9px -6px rgba(0,0,0,0.27);
}
/* no jak to menu*/
#menu
{
height: 60px;
background-color: #474747;
}
/* no jak to logo*/
#logo
{
float:left;
width:250px;
height: 120px;
background-color: #E8175D;
}
/* taki sobie div gdzie jest logo i linki katalogow manu*/
.nav
{
color: white;
float: right;
text-align: center;
text-decoration: none;
}
/* przylepiamy menu*/
.sticky
{
width: 100%;
max-width:1200px;
margin-top: 0px;
position: fixed;
margin-left:auto;
margin-right:auto;
top: 0;
z-index:100;
}
/* podstwowe deklaracje dla ol-a*/
ol
{
margin: 0;
padding: 0;
list-style-type: none;
height: 60px;
float: right;
}
/* tu smigamy z linkami gdzie a ma sie bmiecic na bialo*/
ol a
{
color: white;
text-decoration: none;
display: block;
line-height: 60px;
}
/* podstawowe deklaracje wyglądu i*/
ol > li
{
display: inline-block;
width: 100px;
height: 60px;
border-right: 1px solid #575757;
}
/* przyklejenie lewego bordera*/
ol > li:first-child
{
border-left: 1px solid #575757;
}
/* taki efekt koloru i cienia po najechaniu na katalogi menu */
ol > li:hover
{
background-color: #E8175D;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
text-shadow: 1px 1px black;
}
/*po najechaniu na link katalogow glownych tekst zmieni sie na czarno jakk PAPA Mirek powiedział*/
ol > li:hover a
{
color: #A3A3A3;
}
/* podstawowe deklaracje wyglądu */
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 60px;
display: none;
}
/* menu staje sie visible*/
ol > li:hover ul
{
display: block;
}
/* tu się zastanawiam czy powinienem dawać width stały dla rozwijanego menu 200px, co jeśli trzeba będzie wyświetlić go na telefonie?
kolejna sprawa chce aby rozwijane menu z width byłe centralnie srodkiem pod katalogami menu, ale ostatni link 5 musi zmieścić się wewnatrz tego diva "contenr"
*/
ol > li > ul > li
{
list-style-type: none;
padding: 0;
margin: 0;
height: 60px;
background-color: #E8175D;
width: 200px;
position: relative;
right: 50px;
z-index:100;
-webkit-box-shadow: inset -2px 2px 39px -11px rgba(0,0,0,0.75);
-moz-box-shadow: inset -2px 2px 39px -11px rgba(0,0,0,0.75);
box-shadow: inset -2px 2px 39px -11px rgba(0,0,0,0.75);
}
ol > li > ul > li:hover
{
background-color: #E1175D;
}
ol > li > ul > li:hover a
{
color: white;
}
Pytania
Dlaczego sript jquery podpina sie na dole body, a nie w head?
Przy ukladaniu linkow "strona głowna" "kontakt" aby wyśrodkować je centralnie na środku w pionie używać line-height czy paddingu?
Kolejna sprawa jak ułożyć linki "li" w jednym poziomie? Informuje że div "nav" jak widać ma float: right, czy powinienem raczej użyć position: realtive... ale wtedy gdzieś się zgubi reponsywność, tak coś mi się wydaje?
