I am using nav-pills as a collection of toggles for a tagging system. It is an unordered list with list elements. The list items are setup like this with Jade and NodeJS:
.row
.tagnav.col-xs-12
ul.ptag.nav.nav-pills
each tc in tagColours
li(onClick="selectTag('"+tc.tag+"', '"+tc.colour+"')").active #{tc.tag}
The row is aligned in the centre of the screen with:
.tagnav {
display: flex;
justify-content: center;
flex-direction: row;
}
like so:
As I make the window more narrow the nav-pills start to fold (which is good) but the layout is not pleasant. This is what they look like when I make the window smaller:
I would like them to line up nicely in centred rows. Like this (photoshopped):
I am using Jade for my HTML so I can get the tags dynamically from an array on the server so for the jsfiddle I've just put the tags in statically. They seem to behave the same. JSFiddle
Thanks.
Adding this makes it better:
.ptag.nav-pills > li.active {
color: white;
background-color: black;
border-radius: 15px;
padding: 5px 10px 5px 10px;
margin: 5px;
}
.nav-pills>li {
display: inline-block;
}
.nav-pills {
text-align: center;
}
Fiddle: https://jsfiddle.net/bnn9f3a3/
If you want to maintain the flex style..
(see fiddle below for a more readable comments explanation)
.tagnav {
display: flex;
}
.ptag {
display: flex;
flex-wrap: wrap;
flex: 1;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
margin: 5px;
padding: 5px 10px;
text-align: center;
font-variant: small-caps;
font-weight: bold;
font-size: 18px;
color: white;
background-color: black;
border-radius: 15px;
cursor: pointer;
}
.ptag.nav-pills > li.inactive {
color: #909090;
}
<div class="container">
<br>
<div class="row">
<div class="tagnav col-xs-12">
<ul class="ptag nav nav-pills">
<li class="active">tech</li>
<li class="active">art</li>
<li class="active">electronics</li>
<li class="active">dsp</li>
<li class="active">c++</li>
<li class="active">openframeworks</li>
<li class="active">processing</li>
<li class="active">graphics</li>
<li class="active">java</li>
<li class="active">unity3d</li>
<li class="active">c#</li>
</ul>
</div>
</div>
</div>
fiddle
based on your html structure
https://jsfiddle.net/Hastig/x3mu0k1d/
original, for others
https://jsfiddle.net/Hastig/h8w58rzd/
Related
When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>
This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/
Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.
I have a annoying bug with my website where when i preview my website with live server, there is a unwanted horizontal scroll bar when there is no content in the scrolled area. I am a new developer so i come across many errors which mostly i can resolve. Can someone help me with the error in my code which is causing the horizontal scroll bar.`
This is my HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
h1 {
color: pink;
padding-top: 10px;
padding-left: 10px;
font-family: sans-serif;
text-align: center;
}
p {
color: pink;
font-family: sans-serif;
padding-left: 5px;
text-align: center;
}
.titles {
border: 3px solid #fff;
padding-top: 30px;
padding-bottom: 30px;
}
header ul li {
color: pink;
list-style-type: none;
padding-left: 40px;
padding-right: 40px;
padding-top: 30px;
padding-bottom: 30px;
}
header ul {
display: flex;
position: relative;
left: 400px;
}
header a {
text-decoration: none;
color: pink;
}
<header>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</header>
<div class="titles">
<h1>HI, I'm Anas and I'm a Junior Webdeveloper.</h1>
<p>
I have recently started coding and I am looking to persue a career in software engineering and web developing.
</p>
</div>
Adjust your header ul css to leverage flexbox so you don't need the padding-left: 400px, which is causing the unwanted horizontal scroll:
header ul {
display: flex;
justify-content: flex-end;
}
This happens in HTML when the content goes beyond the width of the screen. A quick fix is too add
overflow-x:hidden
So in your style tag add
body{
overflow-x:hidden;
}
To read more on the overflow property
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Happy Coding!
I'm a newbie of front-end development. I'm currently working on a project trying to make my header style change while scrolling using intersectionObserver. I'm also using fullpage.js to create a full page transition effect. However, I encounter the problem that when I scroll, browser considers section 1 and section2 are the same section, which the header style will only change when I scroll to the section3.
Would anyone tell me what happened? Maybe I missed something.
The code I used is here:
<div class="header">
<a href="#">
<h1>logo<h1>
</a>
<nav>
<ul class="nav-link">
<li>projects</li>
<li>about</li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section s1">
</div>
<div class="section s2">
</div>
<div class="section s3">
</div>
<div class="section s4">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #070520;
}
.header {
--text: #fff;
--background: transparent;
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 999;
padding: 1rem 6.5rem 0 1.5rem;
background-color: var(--background);
}
.header a {
font-size: 0.8rem;
text-decoration: none;
color: var(--text);
font-family: "Helvetica", sans-serif;
font-weight: 100;
letter-spacing: 0;
}
.header .nav-link {
list-style: none;
}
.header .nav-link li {
display: inline-block;
bottom: 0;
padding: 0px 10px;
}
.header-scrolled {
--text: #070520;
}
.s2 {
background-color: grey;
}
.s3 {
background-color: green;
}
.s4 {
background-color: blue;
}
new fullpage("#fullpage", {
scrollingSpeed: 1000,
});
const header = document.querySelector('.header');
const sectionOne = document.querySelector('.s1');
const sectionOneOptions = {};
const sectionOneObserver = new IntersectionObserver(function(entries,sectionOneObserver){
entries.forEach(entry=>{
if(!entry.isIntersecting){
header.classList.add('header-scrolled')
}else{
header.classList.remove('header-scrolled')
}
})
},sectionOneOptions);
sectionOneObserver.observe(sectionOne);
https://codepen.io/Austin020304/pen/WNwjqaO
Thank you!
Consider using fullPage.js state classes or callbacks for that.
Also, do not forget to check the callbacks examples:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You might also want to check this video tutorial I did making use of the state classes to create animations.
I have an application that has a <nav> selection list of items that will dynamically open in an <article> area. Each item is defined as a <div> in the <article> area with display:none, until each is activated by a JavaScript function as the user clicks selections in the <nav>. As they appear in the <article> area, they show up in the sequence they are defined in the <article>. The salient and somewhat pseudo parts of the code are shown below.
I would like each div to show up in the sequence that the user clicks, and not in the sequence the divs are laid out. So if the user selects item002 then item001, the respective divs would show in the sequence item002, item001.
I've been trying to find a way to do this with flex column layout by dynamically changing the order of the article divs, something like:
document.getElementById(shID).order = myOrdervar;
So far nothing I've tried has worked, and I can't find documentation on flex telling me if this is even possible. Does anyone have a technique for changing the display sequence of the article divs, with or without flex?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 1em Helvetica;
background: #999999;
}
#main {
min-height: 500px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
height: 600px;
flex: 3 1 60%;
order: 2;
flex-flow: column;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
height: 600px;
flex: 1 6 20%;
order: 1;
overflow: auto;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0;
flex-direction: column;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
<script language="javascript" type="text/javascript">
var globalOrder = 1;
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'flex';
document.getElementById(shID).style.order = globalOrder;
globalOrder++;
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
.showSquid {
display: block;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
font-size: 1.0em;
font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-left: 0px;
border-top: 0px solid #666;
border-bottom: 0px dotted #36f;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
color: white;
}
</style>
</head>
<body>
<header>
Sources
</header>
<div id='main'>
<nav>
<a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
Wilmington Wind
</a><br>
<a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
Art Machine
</a><br>
<a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
Breathing
</a><br>
<a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
</a>
</nav>
<article>
<div id='Wilmington Wind' class='more' style="flex-direction: column;">
Wilmington Wind<br>
</div>
<div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
Art Machine<br>
</div>
<div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
Breathing
</div> <!-- Breathing-original.mp3 -->
</article>
<footer>© 2017</footer>
</div>
</body>
</html>
The parent element needs display: flex; — in your case, that's the <article> element.
Add this in your <style> element:
article {
display: flex;
}
You miss the .style part in document.getElementById(shID).order=myOrdervar;:
document.getElementById(shID).style.order=myOrdervar;
I wanna make the select input like this, I already designed the UI
I tried to search in google, how to build it to code and many of the people seems to use dropdown css with UL and LI.
Is there any way to build this design with select tag, or if I must use dropdown li how to build the list to functions like select.
You can simulate the select dropdown as follows.
I assume you use a form for this. The code contains a hidden input element which will get the value that was selected.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>