Semantic-ui is integrated with my laravel app. All buttons are working but Menubar is not working i.e whatever code I copied from documentation it is showing like that only.
I have linked these files -
<link rel="stylesheet" type="text/css" href="{{asset('semantic/dist/semantic.min.css')}}">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{asset('semantic/dist/semantic.min.js')}}"></script>
<div class="ui secondary menu">
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item"> Logout </a>
</div>
By default Home is active but when i click or focus on another item i.e messages or Friends , it is not showing as active otherwise hovering effect is working fine.
As you see, only the first menu item is marked as active in your code, so why do you expect any other menu items to be marked as active when you click on them?
<a class="active item"> Home </a>
You should detect which menu item is active when you render the menu and set active class to the necessary item.
So, for example, when you are on "Home" page your menu should look like this:
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
But when your are on the "Friends" page your menu should look like this instead:
<a class="item"> Home </a>
<a class="item"> Messages </a>
<a class="active item"> Friends </a>
And everything else depends on your implementation (either it's PHP or other server-side language if you generate your menu or JavaScript if you toggle its state in the browser).
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
I have a page where I want the data to be showed in multiple tabs (and the data may only be loaded when clicked on the tab):
View
#model project.Models.AdminModels.Module
#{
ViewBag.Title = "Module";
}
<h2>#ViewBag.Title: #Model.Name</h2>
<div class="ui secondary pointing menu">
<a class="item" asp-controller="Module" asp-action="Details" asp-route-id="#Model.ID">
Details
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Menus
</a>
</a>
<a class="item" asp-controller="Module" asp-action="Menus" asp-route-id="#Model.ID">
Other tabs
</a>
</div>
<div class="ui segment" id="content">
</div>
Is their a way that I can load the data in the content div, without reloading and redefining the whole page?
I'm trying microdata for breadcrumbs on a development site, and I've followed Google's own example, but for some reason the actual breadcrumb doesn't preview in the Structured Data Testing Tool
This is how my code looks like:
<div class="back" xmlns:v="http://rdf.data-vocabulary.org/#">
<h3>
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Steaks And Game
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">
Wagyu Steaks
</span> ::
<span itemprop="breadcrumb" typeof="v:Breadcrumb">Tenderloin - Filet Mignon
</span>
</h3>
<div class="clear"></div>
</div>
And this is what the Structure Data Tool is showing me:
It's showing URL under the title instead of the breadcrumb links.
This is an example showing the breadcrumb links:
The test page is here
And the preview of the page using the Structured data tool is here
site is built using Asp.Net
I've tried a number of things like:
Using the › sign instead of ::
I've even copy pasted Google's own example code for microdata breadcrumb implementations:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</div>
I've copy pasted the entire source code of the page on another page on a linux server and amazingly that validates correctly. I really don't know what to do further. Any advice would be appreciated.
I found a way to use the current Schema.org markup for valid breadcrumbs. It is important to not just append the breadcrumb links one by one, but to nest them and give all but the first one the 'child' itemprop.
<p id="breadcrumbs">
<span itemprop="breadcrumb" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Dresses</span>
»
<span itemprop="child" itemscope="itemscope" itemtype="http://schema.org/Breadcrumb">
<span itemprop="title">Real Green Dresses</span>
</span>
</span>
</span>
</p>
This is exactly how it works with Data-Vocabulary.org, it just uses the more current Schema.org markup instead. This will tell the search engines how your breadcrumbs are connected.
Use This SCHEMA strcture
**
Use this for Microdata for breadcrumber
**
<div class="breadcrumbs">
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="home" >
<a href="index.html" title="Go to Home Page" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href="product.html" title="Product" itemprop="url">
<span itemprop="title">product name</span>
</a>
<span>></span>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="category5">
<a href=".finalproduct.html" title="final product" itemprop="url">
<span itemprop="title">final product</span>
</a>
<span>></span>
</li>
<li class="category6"><strong>Final Product view</strong></li>
</ul>
</div>
**
Important: It also used for SEO Purpose
**
enter link description here
Using gumby CSS framework, when in mobile layout, the top level anchors with dropdowns are clickable. When clicked, the anchor loads a new page instead of showing the dropdowns. Has anyone encountered this problem and found a solution?
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<div class="dropdown">
<ul>
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</div>
</li>
<li>Customize</li>
</ul>
</div>
Your anchor was pointing to google.com instead of itself "#"
Also I would try and avoid opening a div inside of a list for your css to use, instead add aclass to your lists
should be:
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li>Features</li>
<li>
<!-- This link opens dropdown but also redirects to the href -->
Documentation
<ul class="dropdown">
<li>The Grid</li>
<li>UI Kit</li>
<li>Sass</li>
<li>JavaScript</li>
<li>Demo</li>
</ul>
</li>
<li>Customize</li>
</ul>
</div>
Hyperlink in navbar dropdown doesn't seem to work.Even the "disabled" doesn't seem to work.
Here is my code
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled"
data-toggle="dropdown" href="http://www.google.com"> Link
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li></ul>
</li>
</ul>
</div>
</div>
</div>
Clicking the link where you have set Google as the link won't take you to that link as the click action on that link opens/closes the dropdown menu.
If you put a link on another anchor tag you'll see that those will work fine.