I built a few websites with responsive navigation already. There are many solutions for responsive designs of website navigation if you have a static navigation.
However, for my current project I am building an user-individual dynamic navigation, so the number of navigation element as well as their contents are subject to change and are user individual. Therefore I tried different things with flexbox and floating layouts already but did not find a solution meeting my needs.
Do you have an idea how to fix the problem showed in the picture attached?
I also attached some sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: "Avenir";
}
body {
margin: 0;
}
header {
background: #303ca2;
color: white;
margin-bottom: 20px;
display: flex;
}
h1 {
font-size: 24px;
margin: 0;
text-transform: uppercase;
font-weight: 400;
padding: 10px;
line-height: 40px;
flex-shrink: 0;
}
nav {
}
nav ul {
margin: 0;
padding: 0;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
font-size: 16px;
padding: 10px 10px;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<h1>Title Zone</h1>
<nav>
<ul>
<li>Navigation Elem 1</li>
<li>Navigation Element 2</li>
<li>Navigation 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Navigation 6</li>
<li>Element n</li>
</ul>
</nav>
</header>
</body>
</html>
you need use media query to set what will appear in each screen size.
In the HTML file you will define all cases including a div tag "more" with yheir li tag
but when the screen size if less than a certain number this div will recive display: none
for example:
<ul>
<li>element 1</li>
<li>element 2</li>
<li class="disabledOnMobile">element 3</li>
<li class="disabledOnMobile">element 4</li>
<div class="activeOnMobile">more...
<ul>
<li>element 3</li>
<li>element 4</li>
</ul>
</div>
</ul>
and with media query you can hide or show something based in the width screen like this:
#media only screen and (max-width: 400px) {
.disabledOnMobile {
display: none;
}
}
hiding all tag with disabledOnMobile class (element 3 and 4 showing their only with "more")
#media only screen and (min-width: 400px) {
.activeOnMobile {
display: none;
}
}
Here we hide the activeOnMobile when the screen is bigger than 400px showing only element 3 and 4 that is outside activeOnMobile class
in your case you need add the hover on "more" and set anothers settings, it's only a example, you can also add a breakpoin in any screen size. To becobe it's easier you can use some library like bootstrap.
You can lear more about media query here
Related
I am creating vertical page navigation. I know exact height (300px) and that there will be 5 items (all of them may be of different sizes, but none of them will exceed 60px of height).
What I want to achieve is to display all the items centered vertically in their table row, here is the fiddle: https://jsfiddle.net/6sp5n7xg/.
HTML
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5<br />Item 6</li>
</ul>
</div>
CSS
.wrapper {
height: 300px;
background-color: #EEE;
}
ul {
display: table;
}
ul li {
display: table-row;
height: 60px;
}
Horizontally it works fine: https://jsfiddle.net/vq9mt02h/1/, but I want it also to be vertical.
Here a working example that starts from your code, only slightly modified. You must wrap each cell content in a span and set it display:table-cell;, moving to this selector also properties about height and vertical-align (I added also a red border to highlight middle alignement). So, here the modified code:
HTML
<div class="wrapper">
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
<li><span>Item 4</span></li>
<li><span>Item 5<br />Item 6</span></li>
</ul>
</div>
CSS
ul li {
display: table-row;
}
ul li span {
display: table-cell;
height: 60px;
border:solid 1px red;
vertical-align:middle;
}
For the love of everything sacred don't abuse tables for this. Flexbox is your saviour, both for the menu layout itself, and for the perfect bidirectional centering. Consider the following sample:
.wrapper {
background-color: #EEE;
}
ul, li {
margin:0;
padding:0;
}
ul {
display: flex;
flex-direction: column;
}
li {
display: flex;
align-items:center;
justify-content:center;
height: 60px;
width:120px;
border:1px dotted black;
}
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5<br />Item 6</li>
</ul>
</div>
Change flex-direction on the ul to row to have the same layout horizontally.
Only need to forget support for IE9, but since that's 3 major versions gone by now that's generally considered fine for most sites.
Question: How do I get this to work for tabbing, using CSS only? (Tabbing already works).
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}
<html>
<title>Test</title>
<body>
<header>
Link to homepage
</header>
<nav>
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<main>
<p>Other text with maybe a link here.</p>
</main>
</body>
</html>
EDIT: Original question follows.
I have a menu:
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
However, I want to hide it at a narrow page width, so I apply the following CSS:
#media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
This hides the menu, adds the word "Menu" in it's place, with a down or up arrow, depending on the hover state, which also shows the menu when you hover over it.
The problem is that, while :hover works just fine, I cannot get both to show by tabbing to one of the tags, using the :focus pseudo class. (Alas, :root will not work like other pseudo classes, so something like #menu a:focus:root #menu a { position:relative; left:0; } won't work, as far as I can see).
Does anyone have any ideas as to how I could approach this, using only CSS? Or have I dug myself into a hole?
Based on OP comment below:
I'm happy to change the HTML, but how would :target work here?
here is a snippet with :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}
<nav id="menu">
<ul>
<li>Menu item 1
</li>
<li>Menu item 2
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>
Using ionic to build an app, and I have a need to display an actual bullet list:
item 1
item 2
item 3
However, it appears that the framework does some sort of CSS reset / magic on <ul> and <li> elements such that they should only be used as structure elements (e.g. a list), rather than as UI.
I ended up creating my own unordered-list CSS style to give me the UI I needed. Is that the right way to do-it-yourself - or does ionic have some CSS style buried deep inside that I should have used instead?
ty in advance.
Just overwrite the reset.
ol, ul {
list-style: none;
}
Like this (place in your CSS after the CSS of the framework)
ul {
list-style-type: disc;
}
Best practise: set a class on the navigation element namely the ul.
<section>
<ul class="my-nav">
<li>List item</li>
<li>List item</li>
</ul>
</section>
.my-nav {
list-style-type: disc;
}
You can gave a class for the ul element and define your own style.
HTML:
<div id="list">
<h5>Just three steps:</h5>
<ul>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ul>
</div>
CSS:
#list {
width: 170px;
margin: 30px auto;
font-size: 20px;
}
#list ul {
margin-top: 30px;
}
#list ul li {
text-align: left;
list-style: disc;
margin: 10px 0px;
}
See demo
I could not see the bullets either, they were just not on the visible page. Adding some padding fixed it:
<style>
.my-modal-list {
list-style-type: disc;
padding: 20px;
}
</style>
<ul class="my-modal-list">
Try This :
<ul style="list-style-type:disc;">
<li>
item1
</li>
<li>
item2
</li>
<li>
item3
</li>
<li>
item4
</li>
</ul>
I want to set up a page that hides a menu bar, depending in the size of the screen. I have it set up so that this menu bar is supposed to disapper when someone sets it to a mobile screen size (I believe 480px). However, when I assign the nag to display:none, it won't appear at all on the page. Here's the code:
Here is the url: http://matthewtbrown.com/jeffandcricketquilt/liquid/index2.html
<nav class="fluid fluidList hide_mobile">
<ul>
<li>Home</li>
<li>Quilt Show Photos</li>
<li>Video Tutorials</li>
<li><a>Services</a>
<ul>
<li>Quilt Photography</li>
<li>Photos to Fabric Transfers</li>
<li>Downloadable Patterns</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Contact Us</li>
<li>Photo Credit</li>
</ul>
</li>
</ul></nav>
Here is the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
background-image: url(../images/pattern2.jpg);
background-repeat: repeat;
min-width: 480px;
}
#div1 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
Put
.hide_mobile {display:block} in the #media only screen and (min-width: 769px) area and then put .hide_mobile {display:none} in the #media only screen and (max-width:480px) area.
and let me know if that helps.
When trying to add an box with content inside it on a menu on a hover "drop down menu", it does something like this:
(source: gyazo.com)
I want the drop down to popup when I hover on the categories menu item.
This is the code I used for it:
<div class="secondheader">
<div class="container">
<div class="span12">
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories </li>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}
.nav6 {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6 li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}
I've tried using tutorials but I don't really understand on how to make the same thing for my layout I mean it has different ways and classes.
Do you want something like http://jsfiddle.net/b76Qc/?
Edit:
In your case the submenu is horizontal because you use descendant selectors instead of child selectors:
replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul
See my jsfiddle if you want the complete code.
Edit 2:
If you want each element to have a different background,
<li class="dropdown1">Categories
<ul>
<li style="background:red">Buy</li>
<li style="background:blue">Sell</li>
<li style="background:green">Forums</li>
...
</ul>
</li>
But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can't know what's happening just with images...
Edit 3:
You have to change
.nav6 a {
color: #7D7253;
padding: 20px;
}
into
.nav6>li>a {
padding: 20px;
}
.nav6 a {
color: #7D7253;
}
And
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410F;
text-decoration: none;
}
into
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");
}
Edit 4:
Sorry I didn't explain why I was telling you to use selectors with >, I thought you knew it.
Your html is like this:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</li>
</ul>
If you use .nav6 a, the style will be applied to all <a> inside .nav6. That's a descendant selector.
Then, this will be applied both to menu's links and submenu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu's links). This way we can set which styles we want to apply to all links and which to menu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
Edit 5:
To fix the problem with backgrounds,
change
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
to
.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
color: #53410F;
text-decoration: none;
}
and
.nav6 > li > a:hover
background-image: url("../img/hoverbg.png");
}
to
.nav6>li:hover>a {
background-image: url("../img/hoverbg.png");
}
To show you how little code is actualy required to make this work i set up a small example here: http://jsfiddle.net/fS5WV/
I put the explanations in the css.
The key lies in nesting the menu's properly, and giving the submenus a position absolute to prevent them from pushing the content down.
I hope it makes sense. Feel free to ask if you need further explanation.