I am a beginner at web development and I am now using semantic-ui framework for my font-end development.I have tried the sample code for the first example menu at this link.
http://semantic-ui.com/collections/menu.html
But my menu don't change active state on click like this.I have tried $("..").menu() method and it shows $(..).menu is not a function.I wonder if you could help me please.Shall I have to write my custom Javascript code to change active state on click or on hover.
Here is my code
<!DOCTYPE html>
<html lang="">
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Semantic-UI-master/dist/semantic.min.css">
<script src="Semantic-UI-master/dist/semantic.min.js"></script>
<style>
</style>
</head>
<div class="ui three item menu">
<a class="item">Editorials</a>
<a class="item">Reviews</a>
<a class="item active">Upcoming Events</a>
</div>
</html>
Use this:
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
});
Although not directly answering the initial question, I think it's worth pointing out that any dropdown-style menu will depend on the dropdown javascript. So for example, the following menu:
<div class="ui top attached menu">
<div class="ui dropdown icon item">
<i class="wrench icon"></i>
<div class="menu">
<div class="item">
item text here...
</div>
</div>
</div>
</div>
Will need to be accompanied by:
$('.ui.dropdown').dropdown();
You can also just put simple in the menu class:
<div class="ui simple three item menu">
Related
I have a weird css issue.
(probably missed something really basic).
I have a small project (one of 8 in my solution).
It is an MVC empty application, with a simple index.html file, which references bootstrap.css
It also has a popup. (which does not reference any css at all).
The popup shows the expected css styles, but it does not reference them at all. (Left to it's parent's css links).
But the index.html ..looks nothing like it should (using navbar navbar-inverse).
What have I missed? please.
I used nm to install the necessary, hence the folder structure.
(The js refs are being picked up).
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Application</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/oidc-client/dist/oidc-client.js"></script>
<style>
.main-container {
padding-top: 70px;
}
</style>
</head>
<body style="vertical-align:top;">
<nav id="main_nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid navbar-inverse" style="color:gainsboro;height:100%">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
<li><button type="button" class="btn btn-default js-call-api">Call API</button></li>
<li><button type="button" class="btn btn-default js-logout">Logout</button></li>
</ul>
</div>
</div>
</div>
</nav>
This is an image of the project's solution explorer.
The solution for an Empty non MVC website in Visual Studio is to show All Files, find the Content folder, then include it in the project, add the css files e.g. bootstrap via NuGet, if not already there (VS usually for most templates adds it in automatically), but in a blank asp.net website, the Content Folder may not be included/visible.
Set your href to the css file and all's done and working.
The problem I'm having only occurs in Mobile. Note that I'm using simple dropdown as well.
I look all the threads related to that, but cannot figure out why the menu does not work.
See the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semantic-UI Issue</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
Home
<div class="ui simple dropdown item">
Menu <i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="https://reactgirl.github.io/portifolio/about.html">About me</a>
<div class="divider"></div>
<a class="item" href="https://github.com/ReactGirl/portifolio/blob/master/about.html">This Code</a>
<a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues/6465">Semantic UI issue</a>
</div>
</div>
</div>
</div>
<div style='padding: 100px 0 0 30px'>
<div>Example page to show a semantic UI issue with the dropdown on mobiles: The dropdown does not open!</div>
<div class="ui padded segment">From the docs: "A simple dropdown can open without Javascript."</div>
<div><strong>The menu dropdown issue was reproduced on the following Mobiles:</strong></div>
<li>iPhone X. Browsers: Safari, Chrome.</li>
<li>iPhone 6. Browsers: Safari, Chrome.</li>
<div class="ui divider"></div>
References:
<div>
Semantic UI GitHub issue
</div>
</div>
</body>
</html>
You need to initialize the dropdown.
$('.ui.dropdown').dropdown();
This is actually a confirmed issue in Semantic-UI.
https://github.com/Semantic-Org/Semantic-UI/issues/6465
My solution was setting Z-index higher on the icon (.dropdown.icon).
The icon was unclickable due to being behind the text input.
I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FDashboard</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li><span>Three</span> <i class="fi-list"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="off-canvas-wrapper">
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<!-- Menu -->
<ul class="vertical menu icons icon-left">
<li><i class="fi-list"></i> <span>One</span></li>
<li><i class="fi-list"></i> <span>Two</span></li>
<li><i class="fi-list"></i> <span>Three</span></li>
<li><i class="fi-list"></i> <span>Four</span></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Adding the below lines to app.scss hasn't solved the problem:
#include menu-base;
#include menu-expand;
#include menu-align;
#include menu-direction($dir);
#include menu-icon-position;
#include menu-icons;
#include menu-icon-position;
What is wrong here ? Thank you!
I'm not sure it to be the best and the right solution. Anyway, it works fine. So if there is a better way, it is always welcome. The described steps were made for a F6 project created with Foundation CLI.
Download Foundation Icon Fonts 3
Unzip the downloaded archive and copy its entire content into [your-project]/css folder.
Delete preview.html file (useless as is used just to display available icons).
Reference the icons CSS file in your HTML page as follows <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />. You can put just underneath the generated during project creation <link rel="stylesheet" href="css/app.css"> line.
Use one of the icons font, for example:
<li><span>Three</span> <i class="fi-list"></i></li>
Enjoy :)
I have added a simple MDL drawer element to the 'Test Template' example (from getmdl.io) and set href='#overview' to link to the 'overview' content page. When clicking the relevant link in the drawer element, nothing happens! I was expecting the content section to render the 'overview' page similar to clicking the tab in the header section. Clearly, I must be doing something wrong. Here is a snippet showing the drawer element and the opening div element of the 'overview' page.
...</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#overview">Overview</a>
<a class="mdl-navigation__link" href="#features">Features</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">...
Any help would be much appreciated! Thanks.
which template is this in getmdl.io please?
I have done this:
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home">Home</a>
<a class="mdl-navigation__link" href="#about">About</a>
</nav>
</div>
<main class="mdl-layout__content">
...
</main>
</body>
and it's diplaying #href on the url and the page remains still.
cross-check your structure with that and if possible, give some more code I check on my end?
I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.
I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.
Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.
Thanks for any help you can provide!
Brookes
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tribal Droid Studio</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="twelve columns centered">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Tribal Droid Studio</h1></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Visual Development</li>
<li>Sign Work</li>
<li>Our Process</li>
<li>Contact Us</li>
<li>About Tribal Droid</li>
</ul>
</section>
</nav>
<div class="row">
<div class="row">
<div class="large-5 columns">
<h2>Tribal Droid Studio</h2>
<p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>
</div>
<div class="large-7 columns">
</div>
<div class="large-12 columns">
<img src="img/tribalhead3.jpg"/>
</div>
<hr />
<div class="row">
<h2>Why Tribal Droid Studio?</h2>
<div class="large-12 columns">
<ul class="large-block-grid-3">
<li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and Branding all go into creating a visual identity.</li>
</panel>
<li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>
<li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>
<li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>
<li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>
<li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>
</div>
<div class="row">
<divclass="small-8 small-centered columns">
<a class="button round"="contact.html">Contact us to get started!</a>
<a class="button round"="#">View our gallery of work</a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
![what I'd like the images and text to do together (font unimportant)][1]
First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...
I count 9 open <div> tags and only 6 close /div> tags...
For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.