I have a responsive fixed top menu that opens after clicking on the Menu icon. Then I would like to hide it after clicking on one of the menu items. Otherwise it covers part of the section that slides up.
I have used the code from this page: http://www.w3schools.com/howto/howto_js_topnav.asp
What do I have to change to the code to hide the list after clicking on one of the menu items?
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Related
been struggling for some time now.
I'm trying to give my welcome-section the same size as the viewport, but I just can't seem to get it done, whatever I do...
Then also, the bottom is hidden under the safari menu when I check the mobile version. I used the same formula as I used before on another project, but it doesn't work here.
Can somebody clarify, please?
Many thanks in advance!
body {
background: linear-gradient(to top right, grey, black);
height: 100%;
}
#navbar {
position: fixed;
width: 100%;
display: block-inline;
top: 0;
left: 0;
background: #db0b15;
}
.navbar {
text-align: right;
margin-right: 10px;
}
.navbar-item {
display: inline;
padding-left: 30px;
color: white;
font-size: 20px;
text-decoration: none;
text-align: center;
}
welcome-section {
height: 100%;
width: 100%;
}
a {
color: white;
text-decoration: ;
text-align: center;
}
h1 {
padding-top: 150px;
text-align: center;
color: white;
}
p {
color: white;
text-align: center;
}
.subheader {
font-size: 30px;
text-decoration: underline;
padding-top: 50px;
padding-bottom: 20px;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 150px 150px;
grid-column-gap: 70px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.project-img {
height: 120%;
width: 120%;
}
.icon {
padding-right: 20px;
padding-left: 20px;
}
.profile-link: {
color: blue;
}
#welcome-section {
height: 100vh;
}
#media only screen and (max-width: 600px) {
.project-img {
max-width: 100%;
max-height: 100%;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 160px 160px;
grid-template-rows: 120px 120px;
grid-column-gap: 5px;
grid-row-gap: 5px;
justify-content: center;
align-content: center;
margin-right: 10px;
}
#media screen and (max-width: 768px) {
_::-webkit-full-page-media,
_:future,
:root .safari_only {
padding-bottom: 170px; //resize
}
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1c24d3937a.js" crossorigin="anonymous"></script>
<title id="title">Personal Portfolio - Iwan Van den Broeck</title>
</head>
<body id="body">
<navbar id="navbar">
<ul class="navbar">
<li class="navbar-item">Welcome</li>
<li class="navbar-item">Projects</li>
<li class="navbar-item">Contact</li>
</ul>
</navbar>
<welcome-section id="welcome-section" class="welcome-section">
<h1>Welcome to my Portfolio.<br><br>I am Iwan<br><br> and I'm a Web Developer<br><br></h1>
</welcome-section>
<projects-section id="projects">
<p class="subheader">These are some of my projects:</p>
<project-list class="project-list">
<a id="tribute-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/YzZoXvY" target="blank" alt="link to Steve Jobs tribute page"><img src="https://drive.google.com/thumbnail?id=1pTGPtU4oKYReRbMnAPkeC1ll-Nor0dSo" alt="screenshot of tribute page" class="project-img"></a>
<a id="survey-form" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/mdWZNPd" target="blank" alt="link to AirAsia customer satisfaction survey"><img src="https://drive.google.com/thumbnail?id=1Sclylussw2JNXSSlD3qs7xABHVKx_0LV" alt="screenshot of survey form" class="project-img"></a>
<a id="product-landing-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/NWjKdre" target="blank" alt="link to Apple landing page"><img src="https://drive.google.com/thumbnail?id=1RY4MuLY8knZk6pogcMwApjJ-fYOtTUCu" alt="screenshot of landing page" class="project-img"></a>
<a id="technical-documentation-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/BaRaRWp" target="blank" alt="link to JS technical documentation page"><img src="https://drive.google.com/thumbnail?id=1Pxp17-rmWZqD0or3lmF2UvtPbKuCyC6l" alt="screenshot of technical documentation page" class="project-img"></a>
</project-list>
</projects-section>
<contact-section id="contact">
<p class="subheader">Contact me:</p>
<p>Let's do some projects together! Contact me for more information.</p>
<p id="contact-links">
<p>
<i class="fas fa-phone-square-alt icon"> Call me</i>
<i class="fas fa-envelope-square icon"> Email me</i>
<i class="fab fa-linkedin icon"> Linkedin</i>
</p>
<p>Click here to visit my Profile
</p>
</contact-section>
</body>
</html>
You could set your section to height: 100vh; to make it the full height of your viewport.
In combination with display: block; it will work.
welcome-section {
height: 100vh;
width: 100%;
display: block;
}
var myapp = angular.module('sortableApp', ['ui.sortable']);
myapp.controller('sortableController', function($scope) {
var tmpList = [];
for (var i = 1; i <= 6; i++) {
tmpList.push({
text: 'Item ' + i,
value: i
});
}
$scope.list = tmpList;
$scope.sortingLog = [];
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};
});
.list {
list-style: none outside none;
margin: 10px 0 30px;
}
.item {
width: 200px;
padding: 5px 10px;
margin: 5px 0;
border: 2px solid #444;
border-radius: 5px;
background-color: #EA8A8A;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.ui-sortable-helper {
cursor: move;
}
.well {
cursor: move;
}
/*** Extra ***/
body {
font-family: Verdana, 'Trebuchet ms', Tahoma;
}
.logList {
margin-top: 20px;
width: 250px;
min-height: 200px;
padding: 5px 15px;
border: 5px solid #000;
border-radius: 15px;
}
.logList:before {
content: 'log';
padding: 0 5px;
position: relative;
top: -1.1em;
background-color: #FFF;
}
.container {
width: 1100px;
margin: auto;
}
h2 {
text-align: center;
}
.floatleft {
float: left;
}
.clear {
clear: both;
}
.nestedDemo ul[dnd-list],
.nestedDemo ul[dnd-list] > li {
position: relative;
}
.nestedDemo .dropzone ul[dnd-list] {
min-height: 42px;
margin: 0px;
padding-left: 0px;
}
.nestedDemo .dropzone li {
background-color: #fff;
border: 1px solid #ddd;
display: block;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<div ng-app="sortableApp">
<div ng-controller="sortableController" class="container">
<h2>ui.sortable demo</h2>
<div class="col-md-12">
<div class="span4">
<div ui-sortable="sortableOptions" ng-model="list">
<div ng-repeat="item in list" class="well">
{{item.text}}
</div>
</div>
</div>
</div>
<div class="floatleft" style="margin-left: 20px;">
<ul class="list logList">
<li ng-repeat="entry in sortingLog track by $index">
{{entry}}
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
Dynamically insert items on this list and it should be able to add list dynamically. List and items should be added on button click event. On each button click, a pop up should arise and ask for corresponding item/list name. List cannot be dragged into an item. They can only be draged above or below existing list. view of output
List and items should be sorted after each drag as shown in the attached image. In the attached image section stands for list and lecture stands for image.
I'm having a really hard time understanding ngAnimate.
HTML:
<body ng-init="hide=false">
<button ng-click="hide=!hide">Toggle</button>
<div class="item" ng-hide="hide">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</body>
CSS:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.item {
padding: 40px;
background: orange;
margin-bottom: 50px;
transition: all linear 3s;
}
.item:hover {
background: red;
}
.item.ng-hide-add {
background: red;
}
Example: http://plnkr.co/edit/rixKjjvy4TUiu1r3MSFm?p=preview
The hover transition works fine, but the ng-hide-add doesn't animate at all.
Im trying to make a fluid responsive web that contains an horizontal navbar, my problem is that at a certain width of the browser window the elements of the bar start to relocate one on top each other, is there any way to avoid this behavior in order to make the navbar just stretch until a certain media query break point. I need to website to look al least decent in the ranges where the querys are not activated.
Here's how things look so far:
http://wearehellyeah.com/test/home_formacio.html
<div class="barra">
<!--Menu Principal-->
<nav class="menu-principal">
<ul class="menu">
<li class="item sub"><button type="button" id="menu-lateral" class="sb-toggle-left"><img src="img/iconos/menu.png" alt="search"></button></li>
<li class="item">Actualitat</li>
<li class="item">Activitat de l'oficina</li>
<li class="item">Vocalies</li>
<li class="item">Formació</li>
<li class="item">Serveis</li>
<li class="item">Actualitat</li>
<li class="item no-border">El Col-legi</li>
<li class="item home">Marcar com pàgina d'inici</li>
<li class="item conectados">Conectados 103</li>
<li class="item"><button type="button" id="search"><img src="img/iconos/search.png"></button></li>
</ul>
</nav>
<!--Fin Menu Principal-->
<!--Input buscador-->
<div class="buscador">
<form action="">
<input type="text" id="ip-search">
</form>
</div>
<!--Fin de Input Buscador-->
</div>
The CSS:
.barra {
background: #00b1da;
width: 100%;
padding: 0;
}
.menu-principal {
height: 36px;
line-height: 35px;
margin: 0 auto;
max-width: 1024px;
position: relative;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
}
.menu .item {
float: left;
list-style: none;
}
.menu .item a {
border-right: 1px solid #008ba9;
color: #fff;
font-size: 13px;
padding: 0 .98em;
text-decoration: none;
white-space: nowrap;
}
.menu .sub {
background: #008ba9;
padding: 0 .4em;
height: 35px;
display: block;
}
.conectados {
background: #fff;
color: #4b585b;
font-size: 13px;
padding: .1em 1em 0 2.3em;
position: relative;
}
.menu .home {
background: url("../img/iconos/home.png") no-repeat 2% #00a9a1;
border-left: 1px solid #40c2d3;
padding: 0 0 0 1em;
}
You could add a min-width:
.menu-principal {
min-width:883px;
}
Then it won't go on top of each other. However there are too many options on the navigation bar, you might want to make it a drop-down box when it goes into a mobile media-query range.
e.g. http://vagish.com (as you make the browser width smaller, it changes the navigation bar)
You could have a media query which takes place between 768px and 880px, and reduces the spacing between menu items, and this should be able to make it look fine until you hit the 768px media query.
This would work (along with the CSS above):
#media all and (max-width: 768px) and (min-width: 880px) {
.menu-principal {
padding:0px;
}
.menu-med .item a {
padding:0 .69em;
}
}
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}