登陆

运用HTML,CSS和Javascript创立美丽的悬停触发的可扩展侧边栏

admin 2019-09-07 209人围观 ,发现0个评论



今日,咱们将学习怎么制造一个在悬停时打开和折叠的侧边栏。它看起来很美丽,完结比看起来简略得多。咱们将逐渐完本钱教程,而且在此过程中我还将介绍一些值得注意的HTML / CSS技巧。

以下是本文将触及的提示和技巧列表:

  • 将栏放在侧边栏中
  • 在悬停时更改项目的色彩
  • 您需求了解怎么修正的Google原料图标存在问题
  • onmouseover和onmouseout作业
  • 怎么将物品保持在一条线上并避免环绕
  • 怎么躲藏侧边栏中溢出的文本
  • 怎么完结滑润过渡

让咱们开端!

第1部分:创立一个简略的侧边栏

能够在此笔中找到此过程的完好代码:https://codepen.io/dalisc/pen/rEjRWo



只运用HTML,您的网页将如下图所示。一些CSS能够做出什么改动!所以咱们需求用一些CSS来设置它,使其看起来像上面的gif。



从第1部分学习的CSS技巧和诀窍:

  • 将栏放在侧边栏中
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;

此代码为侧边栏供给250px(width:250px;)的宽度,布景色彩为深色(background-color:#111;),并使其在页面上彻底笔直延伸(height:100%;)。在code pen以自定义侧边栏。

  • 悬停时更改侧边栏项目的色彩
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}

在这里,咱们运用“text-decoration:none;”删去了文本的下划线和蓝色,并在侧边栏项目周围增加了填充和块显现的一些空格。增强用户体会的部分是当项目色彩从灰色变为白色时,这能够经过以下代码完结:

.sidebar a:hover {
color: #f1f1f1;
}

此代码表明当您将鼠标悬停在类“侧栏”顶用符号的元素上时,元素的色彩将更改为您设置的任何色彩,在本例中为#f1f1f1。

  • 您需求了解怎么修正的Google原料图标存在问题

假如您运用Google的资料图标,您会发现一个令人懊丧的问题:默许状况下,图标和相邻文字没有正确笔直对齐。

.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
padding-bottom: 3px;
margin-right: 30px;
}

你需求做的是在CSS中笔直对齐它们(vertical-align:middle;)。即便这样,对齐也有点违背,所以在此之后给你的图标一个3px笔直增强(padd运用HTML,CSS和Javascript创立美丽的悬停触发的可扩展侧边栏ing-bottom:3px;)。



第2部分:检测您的鼠标是否悬停在侧边栏上

现在咱们将增加一些Javascript,由于咱们将在侧边栏中引进一些功用。能够在此笔中找到此过程的完好代码

  • HTML提示:onmouseover和onmouseout

两个十分有用的作业是onmouseover和onmouseout,它们别离检测您的鼠标是否悬停在特定元素之上或之外。关于咱们的侧边栏,咱们期望检测坐落侧边栏的任何部分,因而咱们需求将这些作业增加到侧边栏的

中,如下所示:

现在,咱们能够决议鼠标悬停在侧边栏上或从边栏悬停的状况。咱们需求将“ somethinghappens”替换为咱们想要实践发作的作业,但首要,让咱们经过向控制台发送音讯来查看是否发作了检测。

现在让咱们编写两个Javascript函数来承认检测到作业:

function testIn() {
console.log(“hovering in sidebar”);
}
function testOut() {
console.log(“hovering outside sidebar”);
}

更新咱们的侧边栏:


现在进行悬停并查看控制台以查找咱们编写的音讯。它应该能够作业了!咱们现已设置了告知侧边栏是折叠仍是打开所需的检测。



第3部分:打开/折叠侧边栏

能够在此笔中找到此终究部分的完好代码:https://codepen.io/dalisc/pen/qzRGxQ

咱们将折叠边栏称为迷你侧边栏。咱们现在想要依据鼠标是否悬停在我的侧边栏上进行两次查找,因而咱们需求在javascript部分中创立一个布尔变量mini



咱们还将创立一个函数来切换侧边栏的扩展。该功用的逻辑如下:假如侧边栏处于迷你形式,将鼠标悬停在侧边栏上会将侧边栏扩展为其完好形式(并将变量mini设置为false)。假如侧边栏处于彻底形式,将鼠标悬停在侧边栏上会将其折叠为迷你形式(并将变量mini设置为true)。

因而,咱们需求更改onmouseoveronmouseout作业,并相应地引胸口闷进新函数toggleSidebar()

更改html:


增加到JS(咱们现在能够删去testIn()和testOut()):

var mini = true;
function toggleSidebar() {
if (mini) {
console.log(“opening sidebar”);
document.getElementById(“mySidebar”).style.width = “250px”;
document.getElementById(“main”).style.marginLeft = “250px”;
this.mini = false;
} else {
console.log(“closing sidebar”);
document.getElementById(“mySidebar”).style.width = “100px”;
document.getElementById(“main”).style.marginLeft = “100px”;
this.mini = true;
}
}

从功运用HTML,CSS和Javascript创立美丽的悬停触发的可扩展侧边栏用中能够看出,它基本上都是改动侧边栏黑色块的宽度。完好形式的宽度为250px,迷你形式的宽度为85px。咱们还战略性地定位文本和图标,以便在侧边栏折叠时彻底躲藏文本,仅显现图标。

默许状况下,咱们期望侧边栏处于迷你形式,因而咱们也将侧边栏的宽度(开始未被遮挡时)更改为85px。

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:运用HTML,CSS和Javascript创立美丽的悬停触发的可扩展侧边栏 #111;
transition: 0.5s;
padding-top: 60px;
}

当时默许外观:



此刻,文本溢出仍有一些问题,所以我将介绍一些CSS提示和技巧!

从第3部分学习的CSS技巧和诀窍:

  • 怎么在一行中获取图标和文本

将“white-space:nowrap;”增加到侧栏CSS。

.sidebar {
height: 100%;
width: 85px;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 60px;
white-space: nowrap;
}

即便文本大于侧边栏的宽度,这也会阻挠文本换行到下一行。但正如你在下面看到的那样,尽管它现在在一行中,它会溢出,你能够看到溢出...所以咱们需求找到躲藏它的办法!



s

  • 怎么躲藏侧边栏中溢出的文本

要躲藏溢出的文本,只需将“overflow-x:hidden;”和“z-index:1;”增加到侧边栏css即可。这将躲藏任何宽于侧边栏宽度的内容。

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}

现在咱们的侧边栏看起来十分好!(我也改动了首要内容,但首要内容未在本教程中介绍,它包含在code pen。)



  • 怎么为扩展创立滑润过渡

现在咱们现已遇到了咱们需求修正的最终一个小毛病,以使侧边栏顺畅移动。现在,跟着侧边栏折叠和打开,没有动画增加到它,所以它看起来有点不连贯,像这样:



所以咱们想要的是一个十分滑润的过渡,如第一页上的gif所示。现在,改变当即发作为了顺畅,咱们需求减缓改变。首要,咱们需求让侧边栏扩展得更慢,比方说0.5秒。将其增加到侧边栏CSS。

.sidebar {
height: 100%;
width: 85px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
white-space: nowrap;
}

咱们还需求将首要部分一起推到左边。

#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 85px;
}

你有一个美丽的侧边栏!

在GitHub存储库中找到完好的作业代码:https//github.com/dalisc/hover-collapsible-sidebar

转:https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

3934595278//p6.pstatp.com/large/dae80011ca2f8c64457运用HTML,CSS和Javascript创立美丽的悬停触发的可扩展侧边栏8[{"name":"CSS"},{"name":"HTML"},{"name":"JavaScript"},{"name":"Google"},{"name":"鼠标"}]1565754454
请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP