HTML、Javascript、CSS文本菜单
我已经制作了一个文本作为按钮，并想用它创建一个菜单。我想做的是修改课文。当我点击按钮时，它就像一个循环菜单，向我显示选项 例如，它是L（凋落物）=1，当我单击按钮时，它会显示其他参数，如mL、加仑、盎司。如果单击mL，文本将从L=1000更改为mL=1000 如果可能的话，你能帮我实际编码吗？这就是我现在拥有的。单击时，我可以键入一个值，它会更改该值。我不需要输入值，但它应该显示我已经存储的值之一，具体取决于我在菜单上单击的内容HTML、Javascript、CSS文本菜单,javascript,html,css,Javascript,Html,Css,我已经制作了一个文本作为按钮，并想用它创建一个菜单。我想做的是修改课文。当我点击按钮时，它就像一个循环菜单，向我显示选项 例如，它是L（凋落物）=1，当我单击按钮时，它会显示其他参数，如mL、加仑、盎司。如果单击mL，文本将从L=1000更改为mL=1000 如果可能的话，你能帮我实际编码吗？这就是我现在拥有的。单击时，我可以键入一个值，它会更改该值。我不需要输入值，但它应该显示我已经存储的值之一，具体取决于我在菜单上单击的内容 var para = document.querySelector
var para = document.querySelector('button');
para.addEventListener('click', updateValue);
function updateValue() {
var value = prompt('Enter a new value');
para.textContent = value;
}
如果我让你明白，这个例子就是你需要的
正文{
字体系列：Alegreya Sans；
背景：#喂养；
}
.菜单{
位置：相对位置；
背景：cd3e3d；
宽度：3em；
高度：3em；
边界半径：5em；
保证金：自动；
边缘顶端：5em；
边缘底部：5em；
光标：指针；
边框：1em实心#fdaead；
}
.菜单：之后{
内容：“；
位置：绝对位置；
顶部：1米；
左：1米；
宽度：1米；
高度：0.2米；
边框顶部：0.6em双#fff；
边框底部：0.2米实心#fff；
}
.菜单ul{
列表样式：无；
填充：0；
}
李先生{
宽度：5em；
高度：1.4em；
填充：0.2米；
边缘顶部：0.2米；
文本对齐：居中；
边框右上角半径：0.5em；
边框右下半径：0.5em；
过渡：所有1；
背景：#fdaead；
不透明度：0；
z指数：-1；
}
.菜单：鼠标悬停{
不透明度：1；
}
/**
*添加一个伪元素以覆盖该空间
*链接之间。这就是菜单
*不丢失：悬停焦点并消失
*/
.菜单：悬停ul:：之前{
位置：绝对位置；
内容：“；
宽度：0；
身高：0；
显示：块；
左：50%；
顶部：-5.0em；
/**
*伪元素是一个半圆
*使用CSS创建。顶部、底部和右侧
*边框为6.5em（左为0），然后
*边界半径将添加到两个角
*在右边。
*/
边界宽度：6.5em；
边界半径：07.5em7.5em0；
左边框：0；
边框样式：实心；
/**
*必须为边框设置边框颜色
*我用的是很轻的
*这样看起来就看不见了。
*/
边框颜色：rgba（0,0,0,0.01）；
/**
*将psuedo元素放在链接后面
*（因此可以单击它们）
*/
z指数：-1；
/**
*将光标设为默认值，使其看起来像
*什么都没有
*/
游标：默认值；
}
.菜单a{
颜色：白色；
文字装饰：无；
/**
*这是为了使文本垂直居中
*小标签就像文本上的东西。
*/
线高：1.5em；
}
.菜单a{
颜色：白色；
文字装饰：无；
}
.菜单ul{
变换：旋转（180度）translateY（-2米）；
过渡：1s全部；
}
.菜单：鼠标悬停{
变换：旋转（0度）translateY（-1米）；
}
.菜单李：悬停{
背景：cd3e3d；
z指数：10；
}
.菜单li：第n个类型（1）{
变换：旋转（-90度）；
位置：绝对位置；
左：-1.2米；
顶部：-4.2米；
}
.菜单li：第n个类型（2）{
变换：旋转（-45度）；
位置：绝对位置；
左：2米；
顶部：-3em；
}
.菜单li：第n个类型（3）{
位置：绝对位置；
左：3.4em；
顶部：0.3em；
}
.菜单li：第n个类型（4）{
变换：旋转（45度）；
位置：绝对位置；
左：2米；
顶部：3.7em；
}
.菜单li：第n个类型（5）{
变换：旋转（90度）；
位置：绝对位置；
左：-1.2米；
顶部：5em；
}
.提示{
文本对齐：居中；
}