i've been tinkering with HTML Applications and VBScript and im wanting to create a multi level dropdown menu in app.
Am i missing something? Doesnt CSS work correctly in HTA
Tried the example at this link: https://htmldog.com/examples/dropdowns3/
which is exactly what im trying to get it to look like
<title>Example Dropdown</title>
<HTA:APPLICATION
APPLICATIONNAME="Example Dropdown"
ID="shortageEmail"
ICON="magnify.exe"
VERSION="1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
background: #333;
margin: 15px;
}
article {
width: 600px;
margin: 0 auto;
background: #000;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px 2px #666;
}
section {
clear: left;
}
h1 {
font-size: 45px;
font-weight: 100;
letter-spacing: 15px;
text-align: center;
}
h1, #main_content, #dog_link {
padding: 15px;
}
p {
margin: 15px 0;
}
a {
color: #06c;
}
#main_nav ul {
background: white;
float: left;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav li {
float: left;
position: relative;
width: 150px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
}
#main_nav > ul > li > a, h1 {
text-transform: uppercase;
}
#main_nav a {
display: block;
text-decoration: none;
padding: 5px 15px;
color: #000;
}
#main_nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
opacity: 0;
}
#main_nav ul ul ul {
left: 100%;
top: 0;
}
#main_nav li:hover, #main_nav li:hover li {
background: #ddd;
}
#main_nav li li:hover, #main_nav li li:hover li {
background: #bbb;
}
#main_nav li li li:hover {
background: #999;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
}
</style>
<!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
<article>
<h1>Tetrapods</h1>
<nav id="main_nav">
<ul>
<li>
Birds
<ul>
<li>Ratites</li>
<li>Fowl</li>
<li>Neoaves</li>
</ul>
</li>
<li>
Mammals
<ul>
<li>
Monotremes
<ul>
<li>Echidnas</li>
<li>Platypus</li>
</ul>
</li>
<li>
Marsupials
<ul>
<li>Opossums</li>
<li>Numbats, etc.</li>
<li>Bandicoots, etc.</li>
<li>Kangaroos, koalas, wombats, etc.</li>
</ul>
</li>
<li>
Placentals
<ul>
<li>Primates, ungulates, etc.</li>
<li>Anteaters, sloths, etc.</li>
<li>Elephants, etc.</li>
</ul>
</li>
</ul>
</li>
<li>
Reptiles
<ul>
<li>Lizards and snakes</li>
<li>Tortoises and turtles</li>
<li>Crocodilians</li>
<li>Tuatara</li>
</ul>
</li>
<li>
Amphibians
<ul>
<li>Frogs and toads</li>
<li>Salamanders and newts</li>
<li>Caecilians</li>
</ul>
</li>
</ul>
</nav>
<section id="main_content">
<p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog Dropdowns tecnhique article for more information.</p>
<p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
</section>
<!-- Link back to HTML Dog: -->
<p id="dog_link"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></p>
</article>
</body>
Expected: https://puu.sh/DJmWR/6da6b5b5dd.png
Actual: https://puu.sh/DJmX7/cc10b87c70.png
This looks like an I.E. standards mode issue. Add a line in your HEAD section to force I.E. 11 mode:
<meta http-equiv="x-ua-compatible" content="IE=11">
You can experiment with lower version numbers until it breaks again.
Oops, just spotted your Edit, too late.
Related
I was wondering how to incorporate the Animate.css library into the Slideshow example over at W3 Schools.
For example, rather than the abrupt image change of Display: none
Could i instead have one of the Animate.css animations play instead?
For example: To zoom out the image, then have the next image zoom in? Or fade? Slide? etc
How could i accomplish this?
Thanks
The W3 Example:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
This is what I have so far: http://codepen.io/Pabi/pen/bdmgjm
Here is my CSS:
/*---------------------------------------------------
3.1 Topbar
---------------------------------------------------*/
#section-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
/* border-bottom: 2px solid;
border-color: rgb(232,235,237);*/
}
/*Makes it so when you hover over the icon stays white*/
#section-topbar a {
color: #fff;
}
#section-topbar ul#nav > li {
display: block;
padding: 0;
}
#section-topbar ul#nav a {
display: block;
font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 18px 20px 18px 20px;
}
#section-topbar ul#nav .menu-item-left a:hover {
background: #222;
text-decoration: none;
}
#section-topbar ul#nav .active a {
background: #44bbaa;
}
#section-topbar ul#nav .active a:hover {
background: #44bbaa;
}
#section-topbar i {
font-size: 25px;
}
/*Center Brand on NavBar*/
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
How can I change the height of the navbar to something that is thinner and possible make the dropdown text with a dropdown icon next to it instead of a button.
Thank you very much.
One simple way would be to use the Sass or Less source and change the default value for $navbar-height
The nice thing about this, is that all the other calculations for top and bottom margins or padding of navbar elements will automatically adjust based on the new value. It's a far more maintainable and clean solution than trying to override the compiled styles.
With regard to making the dropdown text instead of a button, see the example from the bootstrap docs of the dropdown in a navbar, http://getbootstrap.com/components/#default-navbar:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
You should be able to do something very similar inside of your <ul class="nav navbar-nav navbar-right"> element.
You can reduce the height of the topbar with smaller padding around the icons :
#section-topbar ul#nav a {
...
padding: 10px 20px;
}
My team and I are currently working on a project. We initially started with the default Bootstrap version, which was 3.0 at the time. Recently we decided to update some of the NuGet packages that we had installed, including MVCSiteMapProvider. When we did so however, our navigation no longer worked when collapsed on the iPad and iPhone. It was working fine before the update. Whenever I try to click/tap the 3-bar menu, it slides down for a half second then slides up again. We have no idea what to do on this.
Here is how my pages are setup:
_Layout.cshtml:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application Name", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
#Html.MvcSiteMap().Menu("BootstrapMenuHelperModel")
</div>
</div>
MenuHelperModel.cshtml:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu" class="nav navbar-nav">
#foreach (var node in Model.Nodes) {
<li>#Html.DisplayFor(m => node)
#if (node.Children.Any()) {
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
BootstrapMenuHelperModel.cshtml:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
#helper TopMenu(List<SiteMapNodeModel> nodeList)
{
#:<div class="collapse navbar-collapse"><ul class="nav navbar-nav">
foreach (SiteMapNodeModel node in nodeList)
{
string url = node.IsClickable ? node.Url : "#";
if(!node.Children.Any())
{
#:<li class="menu-item">#node.Title</li>
}
else
{
#:<li class="menu-item dropdown">#node.Title<b class="caret"></b>#DropDownMenu(node.Children)</li>
}
if(node != nodeList.Last())
{
#:<li class="divider-vertical"></li>
}
}
#:</ul>#Html.Partial("_LoginPartial")</div>
}
#helper DropDownMenu(SiteMapNodeModelList nodeList)
{
<ul class="dropdown-menu">
#foreach(SiteMapNodeModel node in nodeList)
{
if(node.Title == "Separator")
{
#:<li class="divider"></li>
continue;
}
string url = node.IsClickable ? node.Url : "#";
if(!node.Children.Any())
{
#:<li class="menu-item">#node.Title</li>
}
else
{
#:<li class="menu-item dropdown dropdown-submenu">#node.Title#DropDownMenu(node.Children) </li>
}
}
</ul>
}
#TopMenu(Model.Nodes)
The CSS file:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
All of the other MVCSiteMapProvider files are the same.
The BootstrapMenuHelperModel was set up that way to allow drop down menus as they are necessary for our website. I'm not sure what to do in this case. I have looked around but I haven't seen anything specific in this case. Like I said, these files were making the site work as they were without any other modifications.
If anyone has any idea on what it wrong, I would greatly appreciate your help.
I realized what the problem was. I removed the media query in the CSS file and everything works as it should. I guess Bootstrap 3.2 was having issues with it whereas 3.0 accepted it perfectly. I still haven't figured out exactly why that stopped working but anyone has any ideas they want to share, I would appreciate it. It would be helpful for future reference.
I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.
HTML:
<!--Navigation-->
<div class="band navigation">
<nav class="container primary">
<div class="sixteen columns">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Projects</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
CSS:
nav.primary{
display: table;
margin: 0 auto;
}
nav.primary ul, nav.primary ul li {
margin: 0px;
}
nav.primary select {
display: none;
width: 100%;
height: 28px;
margin: 21px 0;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding: 0 14px;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
background: ##999999;
}
nav.primary ul li a:hover {
background: #2ecc71;
cursor: pointer;
}
Ok finally got it:
nav.primary ul li {
display: inline;
float: left; <---
position: relative;
Remove the float: left;
Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;
I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:
<div class="row">
<div class="two columns offset-by-three">
Portfolio
</div>
<div class="two columns">
About
</div>
<div class="two columns">
Contact
</div>
</div>
What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.
Have you tried nav.primary ul {text-align: center;}
As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.
Trying to create a vertical drop down menu purely with html/css.
the coding is quite clean as far as i can see, and works well in ff, ie (not 6 ofc), and opera though on google chrome and safari the "toplink" jumps to the left on hover.
html:
<div id="topmenu">
<ul>
<li class="toplink">About
<ul class="submenu"><li>About2</li>
<li>About3</li>
</ul>
</li>
<li class="toplink">About
<ul class="submenu"><li>About2</li>
<li>About3</li>
</ul>
</li>
</ul>
css:
#topmenu ul {margin: 0; padding: 0; list-style: none; width: 100%; }
#topmenu ul li {position: relative; float: left; display: inline; }
#topmenu ul li ul {position: absolute; display: none; margin-top: 4px;}
#topmenu ul li ul li {position: relative; clear: left; }
#topmenu ul li:hover ul {display: block; }
seems i was too hastey asking here.
adding #topmenu ul li a {display: block} seemed to do the trick, though not quite sure why.
any explainations would be appreciated, otherwise hope this is of use to others!