everybody, I'm trying the first example in
https://semantic-ui.com/collections/menu.html
it should work when hovering it any idea I'm not getting any error in the console but the dropdown not working not even when I click nothing happens
may this happens because I'm using semantic-ui CDN ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dev College</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>
<body>
<div class="ui text menu">
<div class="item">
<img src="default.png">
</div>
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<div class="ui right dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Applications</div>
<div class="item">International Students</div>
<div class="item">Scholarships</div>
</div>
</div>
</div>
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
</body>
</html>
The example code doesn't include any javascript like the other examples on the same page. If you want the dropdowns to work look into the dropdown documentation under the usage tab which talks more about coupling the dropdowns inside the menu. Dropdowns. And the CDN is fine.
Related
I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>
Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization
I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}
I'm trying to combine 2 different parts of materializeCSS. The horizontal FAB and the card with the button in the center of the picture and the text.
this is the result I like to have
But this is is an 'a' tag what haves his restrictions <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
I'm really close but can't find the last part. I have this result
And I'm using the follow code:
$( document ).ready(function(){
$(".button-collapse").sideNav()
});
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
.btn-card-midle{
transform: scaleY(0.4) scaleX(0.4) translateY(0px) translateX(20px);
opacity: 0;
}
.btn-holder{
position: absolute;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CMS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
</head>
<body>
<!-- navigatie -->
<nav class="nav-extended">
<div class="nav-wrapper">
CMS
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a><i class="material-icons">settings</i></a></li>
<li><a><i class="material-icons">close</i></a></li>
</ul>
</div>
<div class="nav-content" id="tab_menu">
<ul class="tabs tabs-transparent">
<li class="tab"><a class="active" href="#test1">Statics</a></li>
<li class="tab">Edit</li>
</ul>
</div>
</nav>
<main>
<div id="test1" class="col s12">
</div>
<div id="test2" class="col s12">
<div class="row">
<div class="col s12 m3">
<div class="card">
<div class="card-image">
<img src="https://static1.squarespace.com/static/54bff0d3e4b03c2b708fee78/54dce804e4b0208bec0e6939/5554fca4e4b01c8cda5a5d55/1499833385964/log+cabin+exterior.jpg">
<span class="card-title">Card Title</span>
<div class="fixed-action-btn btn-holder horizontal">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating btn-card-midle red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating btn-card-midle yellow darken-1" ><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating btn-card-midle green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating btn-card-midle blue" ><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn" onclick="$('.tap-target').tapTarget('open');" >
<a id="menu" class="btn btn-floating btn-large red"><i class="material-icons">plus_one</i></a>
</div>
<div class="tap-target-wrapper circle-open "><div class="tap-target grey" data-activates="menu">
<div class="tap-target-content white-text open-content">
<h5>I am here</h5>
<p class="white-text">Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.</p>
</div>
</div><div class="tap-target-wave open-btn" ><a class="btn btn-floating btn-large red tap-target-origin"><i class="material-icons">plus_one</i></a></div></div>
</div>
</main>
<script type="text/javascript" src="js/main"></script>
</body>
</html>
Not sure why the other icons are kept in Ul. But this code works to keep the edit button in place.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CMS</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
</head>
<body>
<!-- navigatie -->
<nav class="nav-extended">
<div class="nav-wrapper">
CMS
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a><i class="material-icons">settings</i></a></li>
<li><a><i class="material-icons">close</i></a></li>
</ul>
</div>
<div class="nav-content" id="tab_menu">
<ul class="tabs tabs-transparent">
<li class="tab"><a class="active" href="#test1">Statics</a></li>
<li class="tab">Edit</li>
</ul>
</div>
</nav>
<main>
<div id="test1" class="col s12">
</div>
<div id="test2" class="col s12">
<div class="row">
<div class="col s12 m3">
<div class="card">
<div class="card-image">
<img src="https://static1.squarespace.com/static/54bff0d3e4b03c2b708fee78/54dce804e4b0208bec0e6939/5554fca4e4b01c8cda5a5d55/1499833385964/log+cabin+exterior.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-action" style="padding:0px">
<div class="fixed-action-btn horizontal" style="position:relative; float:right; bottom:35px; right:10px">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn" onclick="$('.tap-target').tapTarget('open');" >
<a id="menu" class="btn btn-floating btn-large red"><i class="material-icons">plus_one</i></a>
</div>
<div class="tap-target-wrapper circle-open "><div class="tap-target grey" data-activates="menu">
<div class="tap-target-content white-text open-content">
<h5>I am here</h5>
<p class="white-text">Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.</p>
</div>
</div><div class="tap-target-wave open-btn" ><a class="btn btn-floating btn-large red tap-target-origin"><i class="material-icons">plus_one</i></a></div></div>
</div>
</main>
<script type="text/javascript" src="js/main"></script>
</body>
</html>
I have a semantic-UI lefside menu that I want to be persistent. I am trying to make 2 states - a wide one with type for each item, and a compact one with an image for each item.
Currently there are a few issues that I am totally stumped on!
1) Why does the menu completely go away on click?
2) How can I make the page NOT do dim?
3) Can the page collapse in width instead of getting pushed to the right?
4) is it possible to have two menu states, as described, and toggle between them on click?
Thank you very much!
My site is here: http://itp.evejweinberg.com/left/
And my html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- my json of content -->
<script type="text/javascript" src="list.js"></script>
<!-- jQuery to build that content -->
<script type="text/javascript" src="buildScene.js"></script>
<script src="semantic/semantic.min.js"></script>
</head>
<!--//do I need this class? -->
<body class="pushable">
<!-- semantic says to put everything in pusher -->
<div class="pusher">
<div class="all">
<div id="main"></div>
<div class="title-holder">
<div class="animatedDiv"></div>
</div>
<div class='container'>
<div class='header'></div>
<div class="all-books"></div>
</div>
</div>
</div>
<!-- menu -->
<div class="ui vertical left labeled menu fixed small sidebar">
<div class="header link item" onclick="scrollTo(captology)">Intro</div>
<div class="item">
<div class="header link item">Emotions</div>
<div class="menu">
<a class="item link" onclick="scrollTo(hope)">Hope</a>
<a class="item link" onclick="scrollTo(anxiety)">Anxiety</a>
<a class="item link" onclick="scrollTo(fear)">Fear</a>
</div>
</div>
<div class="item">
<div class="header link item">Psychology</div>
<div class="menu">
<a class="item link" onclick="scrollTo(transparency)">Transparency</a>
<a class="item link" onclick="scrollTo(loss)">Loss Aversion</a>
<a class="item link" onclick="scrollTo(dark)">Dark Patterns</a>
<a class="item link" onclick="scrollTo(social)">Social Pressure</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(fogg)">Fogg</div>
<div class="menu">
<a class="item link" onclick="scrollTo(motivation)">Motivation</a>
<a class="item link" onclick="scrollTo(ability)">Ability</a>
<a class="item link" onclick="scrollTo(trigger)">Trigger</a>
</div>
</div>
<div class="item">
<div class="header link" onclick="scrollTo(flow)">Flow</div>
<div class="menu">
<a class="item link" onclick="scrollTo(chunking)">Chunking</a>
<!-- <a class="item">FAQs</a> -->
</div>
</div>
<div class="item">
<div class="header">Ethics</div>
<div class="menu">
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
<div class="nav-rect" id="e"></div>
</div>
<div class="header link" onclick="scrollTo(sources)">Sources</div>
</div>
<div class="header">About</div>
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
<script type="text/javascript" src="sketch.js"></script>
<script type="text/javascript" src="js/intro.js"></script>
<script type="text/javascript" src="js/hope.js"></script>
<script type="text/javascript" src="js/lossAversion.js"></script>
<script type="text/javascript">
$('.sidebar').sidebar('show');
// $('.sidebar')
// .visibility({
// type : 'fixed',
// offset : 45 // give some space from top of screen
// });
// $('.menu').click(function(){
// $('.ui.labeled.icon.sidebar').sidebar('toggle');
//
// })
// $('.ui.sidebar').click(function(){
// sidebar('toggle');
// })
</script>
</body>
</html>
Mystery solved! Semantic-UI was dynamically adding to my html on build. I removed the class 'sidebar' and all pusher and dimmer css went away. That solves #1 and #2. For the rest, i'm just going to go back to jQuery animations to slide the left nav to the left and collapse it's width. Thx All!
I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })